Генератор на цветови оттенъци
Създавайте по-светли оттенъци на цвят, като го смесвате с бяло на равни стъпки. Въведете един цвят във формат 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.