Избирач на бои

Изберете боја на тркалото, дотерајте ја на платното за сатурација и осветленост, и прочитајте ја во секој формат што го користи вашиот проект, од #RRGGBB до oklch(). Алатката ги покрива и деловите што другите избирачи на бои ги прескокнуваат: три геометрии на тркалото вклучително и традиционалното сликарско RYB тркало, хармонии кои сами ви ја градат палетата, алфа канал и извоз на целата палета со еден клик како CSS променливи, SCSS или JSON. Сето тоа се пресметува во вашиот прелистувач.

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

• HSV и HSL се дигитални тркала. Нијансите се распоредени онака како светлината се меша на екранот. Се разликуваат по квадратното поле: кај HSV најсветлиот агол е чистата нијанса, додека HSL ги става чистите нијанси на средна осветленост, со бело над нив.
• RYB (сликарско) ги распоредува нијансите онака како ги учат сликарите: црвена, жолта и сина како основни бои, со портокалова, зелена и виолетова помеѓу нив (види RYB color model на Wikipedia, англиски). Разликата најмногу се забележува кај хармониите. На RYB тркалото комплементот на црвената е зелена, а комплементот на сината е портокалова, класичните пигментни парови. Дигиталното тркало ја спарува црвената со цијан. Ако „комплементарна“ палета од обичен избирач на бои некогаш ви изгледала погрешно, ова е причината.

Хармонии на бои: палета што се склопува сама

Во полето Хармонија на бои изберете правило. Тркалото ги означува придружните бои, а под него се појавува готова палета:

• Комплементарна: една спротивна боја. Најсилен контраст, погодна за единствен акцент до главната боја на брендот.
• Разделена комплементарна: двата соседи на комплементот. Скоро ист контраст, но полесно се балансира.
• Тријадна: три нијанси рамномерно распоредени по тркалото. Живописна, а сепак стабилна, кога една доминира, а другите две се користат штедро.
• Тетрадна (квадрат): четири нијанси. Богати шеми за илустрации и графикони, тешки за балансирање во интерфејс на апликација.
• Аналогна: најблиските соседи. Мирна комбинација за позадини и преливи.
• Монохроматска: една нијанса на повеќе нивоа на осветленост. Најбезбеден избор за состојби на копчиња (hover, активно, оневозможено).

Целата палета ја копирате со еден клик во форматот што ви треба: чист 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, Björn Ottosson, во оригиналниот напис (англиски). Синтаксата и поддршката во прелистувачите ги сумира 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 во него ja дефинира целата своја палета). За многу стари прелистувачи, ставете HEX како резерва на редот пред него. Оваа алатка ви ги дава двете вредности.

Зошто хармониите се менуваат кога ќе преминам на RYB тркалото?

Затоа што тоа што е „спротивно“ зависи од тоа како нијансите се распоредени по кругот. RYB тркалото ги распоредува пигментните основни бои рамномерно, така што комплементарните парови одговараат на она што го знаат сликарите: црвена и зелена, сина и портокалова, жолта и виолетова. Тркалата HSV и HSL ги распоредуваат нијансите според тоа како светлината се меша, па затоа ја спаруваат црвената со цијан. Ниту едното не е погрешно: RYB одговара на ликовната традиција, HSV и HSL на она што го прават екраните.

Дали можам да им верувам на вредностите на CMYK за печатење?

Земете ги само како ориентација. Вистинската конверзија за печатење зависи од ICC профилот (англиски) на печатарот, хартијата и мастилото. Истата RGB боја излегува поинаква на сјајна и на матна хартија. Вредностите тука се пресметуваат според стандардна формула, која ве доближува до целта, но финалниот отпечаток е работа на печатницата.

Каде е копчето за пипета во Firefox или Safari?

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

Дали мојата историја на бои останува приватна?

Да. Историјата е зачувана во localStorage на вашиот прелистувач, на вашиот уред. Ништо што избирате, внесувате или копирате не се испраќа никаде. Целата алатка работи како JavaScript во прелистувачот, што можете да го проверите во табот Network во алатките за развивачи.