Онлајн избирач на бои
Изберете боја на тркалото, дотерајте ја на платното за сатурација, и прочитајте ја во секој формат што вашиот проект го зборува – од #RRGGBB до oklch(). Овој избирач ги прави и деловите што другите алатки ги прескокнуваат: три геометрии на тркалото вклучувајќи го сликарското RYB тркало, преклопувања на хармонии кои сами ви ја градат палетата, алфа канал, и извоз на целата палета со еден клик како CSS променливи, SCSS или JSON. Сето тоа се пресметува локално во вашиот прелистувач.
Три тркала, не едно
Селекторот „Режим на тркалото“ ја менува самата геометрија на тркалото:
- HSV и HSL се дигиталните тркала – нијансите се распоредени онака како RGB екраните ја мешаат светлината. Се разликуваат по тоа како се однесува квадратното платно: најсветлиот агол на HSV е чистата нијанса, додека HSL ги поставува чистите нијанси на 50 % осветленост, со бело над нив.
- RYB (сликарско) ги распоредува нијансите онака како што сликарите ги учеле: црвена, жолта и сина како основни бои, со портокалова, зелена и виолетова помеѓу нив. Практичната вредност се гледа кај хармониите – на RYB тркалото, комплементот на црвената е зелена, а комплементот на сината е портокалова, класичните пигментни парови, додека дигиталното тркало ја спарува црвената со цијан. Ако „комплементарна“ палета од обичен избирач некогаш ви изгледала погрешно, ова е причината.
Хармонии кои сами ви ја градат палетата
Изберете правило под „Хармонија на бои“ и тркалото ги означува придружните бои, кои се појавуваат како готова палета:
- Комплементарна — една спротивна боја. Најсилниот контраст; користете ја за единствен акцент наспроти доминантна брендирана боја.
- Разделена комплементарна — двата соседи на комплементот. Речиси ист контраст, многу полесна за балансирање.
- Тријадна — три рамномерно распоредени нијанси. Живописна, но стабилна; нека една доминира, а другите две користете ги штедро.
- Тетрадна (квадрат) — четири нијанси. Богати комбинации за илустрации и визуелизација на податоци; тешки за балансирање во работа со кориснички интерфејси.
- Аналогна — непосредните соседи. Мала тензија, добра за позадини и градиенти.
- Монохроматска — една нијанса во постепени чекори на осветленост. Најбезбедниот избор за состојби на интерфејсот (hover, активно, оневозможено).
Панелот со палета ја копира целата збирка со еден клик, во формат по ваш избор: едноставен 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 | Хексадецимален | Стандардот за веб. Компактен, универзално поддржан, лесен за копирање. 8 цифри додаваат алфа. |
| RGB | Црвена, зелена, сина | Како размислуваат екраните. Три светлосни канали, 0–255. Форматот што повеќето API и canvas код го очекуваат. |
| HSL | Нијанса, сатурација, осветленост | За луѓе што уредуваат рачно. „Малку посветла“ или „помалку заситена“ е промена на еден број. |
| HSV | Нијанса, сатурација, вредност | Графички софтвер. Моделот зад избирачите во Photoshop и GIMP. |
| LCH | Осветленост, Хрома, Нијанса | Перцептивно униформен. Еднакви нумерички чекори изгледаат како еднакви визуелни чекори – она што HSL само се преправа дека е. |
| OKLCH | OK Осветленост, Хрома, Нијанса | Модерниот избор за CSS. Го решава поместувањето на нијансите на LCH кај сините тонови; поддржан во сите тековни прелистувачи и идеален за системи со дизајн-токени. |
| CMYK | Цијан, магента, жолта, клуч (црна) | Ориентација за печатење. Приближна конверзија за комуникација со печатарски дизајнери – финалните вредности секогаш доаѓаат од профилот на бои на печатарот. |
Ситници што штедат време
- Историјата се чува сама. Последните 24 бои со кои сте работеле преживуваат освежување на страницата – зачувани само во локалната меморија на прелистувачот, никогаш не се качуваат никаде.
- Пипета за боја. Во прелистувачи со EyeDropper API (Chrome и Edge) можете да изберете боја од било кое место на екранот, дури и надвор од прозорецот на прелистувачот.
- Контрола со тастатура. Тркалото и платното за сатурација реагираат на стрелките за прецизни прилагодувања до пиксел.
- Предефинирани опции ги покриваат вообичаените основни бои кога ви треба само брз почетен избор.
Често поставувани прашања (FAQ)
Дали `oklch()` е безбеден за употреба во продукциски CSS?
Да. Сите тековни верзии на Chrome, Edge, Firefox и Safari го поддржуваатoklch(), и тој стана претпочитаниот запис за дизајн-токени (Tailwind CSS 4 ја дефинира целата своја палета во него). За многу стари прелистувачи, понудете HEX резервна вредност на претходната линија – оваа алатка ви ги дава двете вредности.