Цветово колело

Изберете цвят на колелото, доизгладете го върху платното за наситеност и яркост и го прочетете обратно във всеки формат, който използва вашият проект, от #RRGGBB до oklch(). Инструментът покрива и неща, които другите избори на цветове пропускат: три геометрии на колелото, включително традиционното художническо RYB колело, хармонии, които сами изграждат палитра, алфа канал и експорт на цялата палитра с едно кликване като CSS променливи, SCSS или JSON. Всичко се изчислява локално във вашия браузър.

RYB или RGB? Три цветови колела вместо едно

Превключвателят Режим на колелото променя подредбата на нюансите върху колелото:

• HSV и HSL са цифрови колела. Нюансите са подредени така, както светлината ги смесва на екрана. Разликата е в квадратното платно: при HSV най-светлият ъгъл е чистият нюанс, а HSL поставя чистите нюанси в средата на скалата за светлост, с бяло над тях.
• RYB (художническо) подрежда нюансите така, както ги учат художниците: червено, жълто и синьо като основни цветове, с оранжево, зелено и лилаво между тях (вижте RYB цветовия модел, на английски). Разликата личи най-вече в хармониите. На колелото RYB допълващият цвят на червеното е зелено, а допълващият цвят на синьото е оранжево, класическите двойки от рисуването. Цифровото колело съчетава червеното с циан. Ако хармонията “допълващ” от обикновен избор на цветове някога ви е изглеждала грешна, ето защо.

Цветови хармонии: палитра, която се изгражда сама

В полето Цветова хармония изберете правило. Колелото отбелязва съпътстващите цветове и под него се появява готова палитра:

• Допълващ: един противоположен цвят. Най-силният контраст, подходящ за единствен акцент до основния цвят на марката.
• Разделен допълващ: двата съседа на допълващия цвят. Почти същият контраст, но много по-лесен за балансиране.
• Триаден: три нюанса, равномерно раздалечени по колелото. Жив, но стабилен избор, когато един цвят доминира, а другите два се използват пестеливо.
• Тетраден (квадрат): четири нюанса. Богати схеми за илюстрации и графики, трудни за балансиране в интерфейс на приложение.
• Аналогов: най-близките съседи. Спокойна комбинация за фонове и преходи.
• Монохромен: един нюанс в няколко степени на светлост. Най-безопасният избор за състоянията на бутоните (hover, active, disabled).

Копирате цялата палитра с едно кликване във формата, който изберете: обикновен HEX, RGB, HSL, OKLCH, готови за поставяне CSS персонализирани свойства (--color-1: …), SCSS променливи или JSON за код. Дали цветовете на палитрата запазват контраст и за хора, които трудно различават нюанси, проверявате бързо на снимка на екрана след превръщане в сиви тонове.

Превод на HEX, RGB, HSL, OKLCH и CMYK: поставете каквото и да е, вземете всичко

Полетата за въвеждане приемат почти всякакъв запис на цвят: #f80, #ff8800, осемцифрен hex с прозрачност, rgb() и rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, както и именувани CSS цветове като rebeccapurple. Каквото и да въведете, получавате седем синхронизирани резултата: HEX, RGB, HSL, HSV, LCH, OKLCH и CMYK, всеки със свой бутон за копиране.

Плъзгачът Прозрачност (алфа) под визуализацията превключва резултатите към прозрачните им форми #RRGGBBAA, rgba() и hsla(). Визуализацията се изчертава върху шахматна дъска, така че веднага виждате прозрачността.

Най-близкият Tailwind CSS токен за всеки цвят

Два етикета под визуализацията назовават цвета: най-близкия именуван CSS цвят (полезен за бързи прототипи) и най-близкия Tailwind токен, например orange-500. Така оставате в рамките на вашата дизайн система, вместо да измисляте еднократни стойности. С кликване върху етикета го копирате.

Това отговаря на въпроса, който изниква при всяко предаване на дизайн: дизайнерът ми изпрати hex код, кой клас на Tailwind му отговаря най-добре? Съответствието се изчислява спрямо стандартната палитра на Tailwind CSS 4 (вижте документацията на Tailwind, на английски), така че можете направо да използвате токена в името на клас.

Кой формат за цвят да използвате?

Формат	Пълно име	Кога да го използвате
HEX	Hexadecimal	Стандартният избор за уеб. Кратък, поддържан навсякъде, лесен за копиране. Осем цифри добавят прозрачност.
RGB	Red, Green, Blue	Така мислят екраните. Три светлинни канала от 0 до 255. Форматът, който очакват повечето API и код за canvas.
HSL	Hue, Saturation, Lightness	За настройка на око. “Малко по-светло” или “по-малко наситено” означава промяна на едно число.
HSV	Hue, Saturation, Value	Графични програми. Моделът, на който стъпва изборът на цвят в Photoshop и GIMP.
LCH	Lightness, Chroma, Hue	Възприемана равномерност. Еднакви числени стъпки изглеждат като еднакви визуални стъпки, което HSL само имитира.
OKLCH	OK Lightness, Chroma, Hue	Съвременният избор за CSS. Поправя изместванията на нюанса в синьото, които тормозят LCH. Поддържан от всички актуални браузъри и подходящ за дизайн токени.
CMYK	Cyan, Magenta, Yellow, Key	Ориентир за печат. Приблизителен превод за разговор с печатницата, крайните стойности определя нейният цветови профил.

Защо OKLCH е по-равномерен спрямо възприятието от по-старите модели, обяснява авторът на пространството Oklab Бьорн Отосон в оригиналната статия (на английски). Синтаксисът и поддръжката в браузърите обобщава MDN (на английски). Как работи моделът за печат, описва Wikipedia в статията за CMYK.

Дребни неща, които спестяват време

• Историята се пази сама. Последните 24 цвята оцеляват след опресняване на страницата. Остават само в хранилището на вашия браузър и никъде не се изпращат.
• Пипетка. В браузъри с EyeDropper API (Chrome и Edge) избирате цвят отвсякъде на екрана, дори извън прозореца на браузъра. Цвят от снимка или от файл с лого откривате в онлайн пипетката.
• Управление с клавиатура. Колелото и платното за наситеност и яркост реагират на стрелките, така че доизглаждате цвета на малки стъпки.
• Предварително зададени цветове предлагат често срещани основни цветове, когато ви трябва само бързо начало.

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

Как да превърна OKLCH в HEX?

Поставете стойност oklch() в полето OKLCH и останалите резултати, включително HEX, се преизчисляват веднага. Работи и обратно: въведете HEX и прочетете съответния oklch(). Едно предупреждение: OKLCH може да опише и цветове извън обхвата на sRGB, а те се отрязват до това, което sRGB показва. Затова много наситен oklch() няма да изглежда еднакво с HEX варианта си на дисплей с широка цветова гама.

Мога ли да използвам oklch() в продукционен CSS?

Да. Всички актуални версии на Chrome, Edge, Firefox и Safari поддържат oklch() и той се превърна в предпочитан запис за дизайн токени (Tailwind CSS 4 дефинира цялата си палитра с него). За много стари браузъри поставете HEX като резервен вариант на реда преди него. Този инструмент ви дава и двете стойности.

Защо хармониите се променят, когато превключа на колело RYB?

Защото това, което е "срещуположно", зависи от подредбата на нюансите по кръга. Колелото RYB разпределя пигментните основни цветове равномерно, така че допълващите двойки отговарят на това, което знаят художниците: червено и зелено, синьо и оранжево, жълто и лилаво. Колелата HSV и HSL подреждат нюансите според смесването на светлина, затова съчетават червено с циан. Нито едно от двете не греши: RYB следва художественото образование, HSV и HSL следват логиката на екраните.

Мога ли да се доверя на стойностите за CMYK за печат?

Приемайте ги като ориентир. Реалният превод за печат зависи от цветовия профил (на английски) на принтера, хартията и мастилото. Един и същ RGB цвят излиза различно на мазна и на немазна хартия. Стойностите тук пресмята стандартна формула, която ви доближава, но крайният отпечатък е работа на печатницата.

Къде е бутонът за пипетка във Firefox или Safari?

Скрит е нарочно. EyeDropper API (MDN, на английски), на което стъпва бутонът, засега умеят само браузъри на базата на Chromium (Chrome, Edge, Opera). Останалите функции на инструмента работят навсякъде, липсва само изборът на цвят от екрана. Ако ви трябва цвят от изображение, използвайте онлайн пипетката, която работи във всички браузъри.

Остава ли историята ми с цветове поверителна?

Да. Историята се пази в localStorage на вашия браузър, на вашето устройство. Нищо, което изберете, поставите или копирате, не се изпраща никъде. Целият инструмент работи като JavaScript в браузъра, което можете да проверите в раздела Network на инструментите за разработчици.