Генератор на цветови нюанси
Създавайте по-тъмни нюанси на цвят, като го смесвате с черно на равни стъпки. Въведете един цвят във формат CSS, изберете от 2 до 20 стъпки и пространство за смесване, за да получите таблица със стойности HEX, RGB, HSL и OKLCH за всеки нюанс, започвайки от оригиналния цвят. Смесването в sRGB съответства на класическите инструменти за нюанси и Sass, а OKLab осигурява визуално равномерни стъпки. Идеално за създаване на цветови скали за UI.
Често задавани въпроси
Какво е нюанс?
Нюансът е цвят, смесен с черно. Запазва тона си и става по-тъмен, за разлика от оттенъка, който се смесва с бяло, или тоналността, която се смесва със сиво.
Как са разпределени стъпките?
При 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. Броят включва оригиналния цвят на първия ред.
Какви стойности показва таблицата?
За всяка стъпка: делът на черното, шестнадесетичният код, rgb(), hsl() и oklch() в съвременен синтаксис на CSS. Каналите RGB са цели числа, процентите HSL са с до два знака след десетичната запетая, а светлотата и наситеността в OKLCH — с до четири.
Какво се случва с прозрачните цветове?
Алфа стойността на входа се запазва за всеки нюанс, тъй като черното се смесва със същата алфа стойност. Шестнадесетичните кодове имат 8 цифри, а функциите CSS завършват с алфа стойността след наклонена черта.
Какво се случва с цветовете извън sRGB?
При смесването се използва пълният цвят, но HEX, RGB и HSL могат да показват само sRGB, затова в тези колони стъпките извън цветовата гама се преобразуват в sRGB чрез алгоритъма CSS Color 4. Колоната OKLCH запазва стойността без преобразуване.
Как да използвам нюансите в CSS?
Копирайте стойностите hex или oklch() в персонализирани свойства като --brand-600 и --brand-700. За да извършите смесването в браузъра, color-mix(in oklab, var(--brand) 80%, black) дава същия нюанс с 20% черно като настройката OKLab.
Достъпни ли са автоматично по-тъмните нюанси?
Не. Проверете контраста на текста спрямо всеки нюанс с инструмент за проверка на контраста, защото нюанс, който изглежда тъмен, все пак може да не покрива 4.5:1 спрямо друг тъмен цвят или цветен текст.