# Генератор на цветови оттенъци

Създавайте по-светли оттенъци на цвят, като го смесвате с бяло на равни стъпки. Въведете един цвят във формат CSS, изберете от 2 до 20 стъпки и пространство за смесване, за да получите таблица със стойности HEX, RGB, HSL и OKLCH за всеки оттенък, започвайки от оригиналния цвят. Смесването в sRGB съответства на класическите инструменти за оттенъци и Sass, а OKLab осигурява визуално равномерни стъпки. Идеално за фонове, състояния при посочване и цветови скали.

## Често задавани въпроси

### Какво е оттенък?

Оттенъкът е цвят, смесен с бяло. Той запазва нюанса си и става по-светъл и блед, за разлика от сянката, която се смесва с черно, или тона, който се смесва със сиво.

### Как са разпределени стъпките?

При N стъпки ред k смесва цвета с (k - 1) / N бяло, така че при 10 стъпки се получават 0%, 10%, 20% и т.н. до 90%. Първият ред винаги е оригиналният цвят, а чистото бяло не се включва в списъка.

### Каква е разликата между смесването в sRGB и OKLab?

Смесването в sRGB усреднява стойностите на гама-кодираните канали — така Sass mix() с бяло и повечето класически генератори на оттенъци. Смесването в OKLab се извършва в перцептивно пространство, затова стъпките на светлостта изглеждат по-равномерни, а светлите цветове не избледняват толкова бързо.

### Кои формати за въвеждане мога да използвам?

Шестнадесетични кодове със или без #, CSS имена на цветове, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() и cmyk(). Въведете по един цвят на изпълнение.

### Колко оттенъка мога да генерирам?

Между 2 и 20 на изпълнение, като стойността по подразбиране е 10. Броят включва оригиналния цвят на първия ред.

### Какви стойности показва таблицата?

За всяка стъпка се показват делът на бялото, hex кодът, rgb(), hsl() и oklch() в съвременен синтаксис на CSS. Каналите RGB са цели числа, процентите HSL имат до два знака след десетичната запетая, а светлостта и наситеността в OKLCH — до четири.

### Какво се случва с прозрачните цветове?

Алфата на входния цвят се запазва за всеки оттенък, защото бялото се смесва със същата алфа. Затова hex кодовете са с 8 цифри, а функциите CSS завършват с алфата след наклонена черта.

### Какво се случва с цветовете извън sRGB?

При смесването се използва пълният цвят, но HEX, RGB и HSL могат да показват само sRGB, затова в тези колони стъпките извън цветовата гама се преобразуват в sRGB чрез алгоритъма CSS Color 4. Колоната OKLCH запазва стойността без преобразуване.

### Как да използвам оттенъците в CSS?

Копирайте стойностите hex или oklch() в персонализирани свойства като --brand-100 и --brand-200. За да смесите цветовете направо в браузъра, color-mix(in oklab, var(--brand) 80%, white) дава същия оттенък от 20% като настройката OKLab.

### Мога ли да поставя бял текст върху светъл оттенък?

Обикновено не, защото контрастът на светлите оттенъци с бялото е нисък. Използвайте тъмен текст върху светли оттенъци и проверете всяка комбинация с инструмент за проверка на контраста; обикновеният текст се нуждае от поне 4.5:1 за WCAG AA.

Вашата реклама тук?

[Пишете ни](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%B2%20OneClick%20Pro)

[Реклама Комплект плъгини за агенти за WordPress.](https://sleekwp.com/?ref=oneclickpro)