Онлайн Избор на Цветове
Изберете цвят на колелото, фино го настройте върху платното за наситеност, и го прочетете обратно във всеки формат, който говори вашият проект — от #RRGGBB до oklch(). Този инструмент за избор прави и нещата, които другите пропускат: три геометрии на колелото, включително художническото RYB колело, наслагвания на хармонии, които изграждат палитра вместо вас, алфа канал и експорт на цялата палитра с едно кликване като CSS променливи, SCSS или JSON. Всичко се изчислява локално във вашия браузър.
Три колела, не едно
Селекторът Режим на колелото променя геометрията на самото колело:
- HSV и HSL са цифровите колела — нюансите са подредени по начина, по който RGB екраните смесват светлина. Разликата е в поведението на квадратното платно: най-светлият ъгъл на HSV е чистият нюанс, докато HSL поставя чистите нюанси на 50% светлост, с бяло над тях.
- RYB (художническо) подрежда нюансите така, както художниците са ги учили: червено, жълто и синьо като основни цветове, с оранжево, зелено и лилаво между тях. Практическата му стойност се вижда в хармониите — на RYB колелото допълващият цвят на червеното е зелено, а допълващият цвят на синьото е оранжево, класическите пигментни двойки, докато цифровото колело съчетава червеното с циан. Ако някога хармония “допълващ” от обикновен инструмент за избор ви е изглеждала грешна, ето защо.
Хармонии, които изграждат палитрата вместо вас
Изберете правило под Цветова хармония и колелото маркира съпътстващите цветове, които се появяват като готова палитра:
- Допълващ — един противоположен цвят. Най-силният контраст; използвайте го за самотен акцент върху доминиращ брандиран цвят.
- Разделен допълващ — двата съседа на допълващия цвят. Почти същият контраст, но много по-лесен за балансиране.
- Триаден — три равномерно раздалечени нюанса. Жив, но стабилен; оставете един да доминира и използвайте другите два пестеливо.
- Тетраден (квадрат) — четири нюанса. Богати схеми за илюстрации и визуализация на данни; трудни за балансиране в потребителски интерфейси.
- Аналогов — непосредствените съседи. Ниско напрежение, добър за фонове и градиенти.
- Монохромен — един нюанс в стъпаловидна светлост. Най-безопасният избор за състояния на интерфейса (hover, active, disabled).
Панелът с палитрата копира целия набор с едно кликване, във формата, който изберете: обикновен HEX, RGB, HSL, OKLCH, готови за поставяне CSS персонализирани свойства (--color-1: …), SCSS променливи или JSON за подаване на код.
Поставете каквото и да е, прочетете всичко
Полетата за въвеждане приемат практически всякакъв цветови запис, който им подхвърлите: #f80, #ff8800, 8-цифрен hex с алфа, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 или CSS имена на цветове като rebeccapurple. Каквото и да въведете, връщат се седем синхронизирани резултата: HEX, RGB, HSL, HSV, LCH, OKLCH и CMYK, всеки със собствен бутон за копиране.
Два помощни чипа под прегледа назовават цвета вместо вас: най-близкото CSS именувано цвят (полезно за бързи прототипи и разговори за цветове) и най-близкия Tailwind токен (напр. orange-500), така че да останете в рамките на вашата дизайн система, вместо да измисляте еднократни стойности.
Плъзнете плъзгача Непрозрачност (алфа) под прегледа и резултатите превключват към своите прозрачни форми — #RRGGBBAA, rgba(), hsla() — с преглед върху шахматна дъска, за да прецените прозрачността.
Кой формат да използвате?
| Формат | Пълно име | Кога да го използвате? |
|---|---|---|
| HEX | Hexadecimal | Стандартът за уеб. Компактен, универсално поддържан, лесен за копиране. 8 цифри добавят алфа канал. |
| 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 | За печат. Приблизително преобразуване за разговори с печатни дизайнери — крайните стойности винаги идват от цветовия профил на принтера. |
Малки неща, които спестяват време
- Историята се пази сама. Последните 24 цвята, с които сте работили, оцеляват след опресняване на страницата — съхранени само в локалното хранилище на браузъра ви, никога не се качват никъде.
- Пипетка. В браузъри с EyeDropper API (Chrome и Edge) можете да вземете цвят от произволно място на екрана, дори извън прозореца на браузъра.
- Управление с клавиатура. Колелото и платното за наситеност реагират на стрелките за прецизни настройки до пиксел.
- Предварително зададени настройки покриват често срещаните базови цветове, когато просто ви трябва бърза отправна точка.
Често задавани въпроси (ЧЗВ)
Безопасно ли е да се използва oklch() в продукционен CSS?
Да. Всички съвременни версии на Chrome, Edge, Firefox и Safari поддържатoklch(), и той се превърна в предпочитания запис за дизайн токени (Tailwind CSS 4 дефинира цялата си палитра с него). За много стари браузъри подайте HEX резервен вариант на предходния ред — този инструмент ви дава и двете стойности.