Статия
Инструменти за цветове за уеб: hex, палитри и достъпност
Изборът на цветове за уебсайт изглежда прост, докато не се изправите пред hex кодове, RGB тройки и HSL ъгли, които всички описват едно и също нещо по различни начини. Тази статия обяснява как тези формати са свързани помежду си, как да превърнете един марков цвят в използваема палитра, и как да се уверите, че резултатът остава четлив за хора, които виждат цвета по различен начин.
Hex, RGB и HSL описват един и същ цвят
Цветът на екрана се получава от смесването на червена, зелена и синя светлина. Нотацията hex записва тези три канала като шестсимволен код като #2563eb, където всяка двойка символи е един канал от 00 до ff. RGB записва същите три числа в десетична форма, от 0 до 255, което е по-лесно за четене, но не добавя нищо повече. HSL подхожда по различен начин: той описва цвета чрез неговия тон (позиция върху цветовия кръг от 0 до 360 градуса), неговата наситеност (колко е жив) и неговата светлота (колко близо е до бяло или черно). HSL е форматът, към който дизайнерите се обръщат, когато искат да коригират даден цвят, защото повишаването на светлотата или изместването на тона е една интуитивна промяна, вместо три свързани числа. Конвертор ви позволява да преминавате между трите, така че да четете стойност в един формат и да я използвате в друг.
Превръщане на един цвят в палитра
Един-единствен марков цвят рядко е достатъчен. Работещата палитра обикновено се нуждае от основен цвят, един или два акцента, и набор от неутрални сиви тонове за текст и фонове. Връзките между цветовете следват прости правила върху цветовия кръг: допълнителните цветове стоят един срещу друг, аналогичните цветове стоят един до друг за спокойно усещане, а триадичният набор разпределя три цвята равномерно за контраст, без да си противоречат. Инструмент за цветова схема прилага тези правила към началния ви цвят и ви дава съответстващите hex кодове, така че да не се налага да изчислявате ъглите на ръка. Ако вече имате изображение, чието настроение ви харесва, извличащ палитри чете доминиращите цветове от него, което е бърз начин да основете сайт върху снимка или лого.
Контраст и цветна слепота
Палитра, която изглежда добре на вашия екран, все пак може да затрудни читателите. Приблизително един на дванадесет мъже и една на двеста жени имат някаква форма на недостатъчност на цветното зрение, най-често затруднение при разграничаването на червеното от зеленото. Ако единственият ви сигнал за грешка е червен текст върху зелен бутон, тези читатели го пропускат. Решението не е да избягвате цвета, а никога да не разчитате само на цвета: съчетайте го с икона, етикет или форма, и поддържайте достатъчен контраст на светлотата между текста и неговия фон. Симулатор на цветна слепота ви показва как изглежда палитрата ви при често срещаните типове цветно зрение, така че да откриете проблем, преди да бъде публикуван, а не след оплакване.
Извършване на всичко това в браузъра
Нито една от тези стъпки не се нуждае от сървър. Преобразуването на hex код, генерирането на схема, четенето на цветове от изображение и симулирането на цветна слепота са все малки изчисления, които браузърът обработва мигновено. Това има значение, когато изображението, което вземате като образец, е непубликуван дизайн или клиентско лого: с инструментите тук файлът остава на вашето устройство и нищо не се качва. Получавате същия резултат, какъвто бихте получили от онлайн услуга, без да предавате графиката. Конверторът на цветове, генераторът на цветови схеми, извличащият палитри и симулаторът на цветна слепота работят локално и функционират по същия начин офлайн, след като страницата бъде заредена.
OKLCH и по-широките цветови пространства
Hex, RGB и HSL описват цветове в рамките на gamut-а на sRGB, който екраните използват от години. По-новите дисплеи показват повече, а CSS вече може да достигне до тях чрез функцията color() и пространството Display P3, което добавя ярки зелени и червени, каквито sRGB не може да представи. По-голямата промяна е OKLCH: начин за записване на цвят чрез яркост, хрома и нюанс (hue), който отразява как окото действително възприема светлостта. В HSL жълто и синьо при еднакви 50% яркост изглеждат съвсем различно: жълтото изглежда светло, синьото изглежда тъмно. В OKLCH, ако държиш яркостта фиксирана и променяш само нюанса, субективно възприеманата светлост остава постоянна. Това прави практично изграждането на палитра, в която всеки нюанс постига едно и също ниво на контраст, като заключиш само едно число, вместо да настройваш всеки цвят ръчно.
Инструменти от тази статия
- Конвертор на цветовеКонвертирайте цветове между HEX, RGB, HSL, HSV и CMYK. Включен WCAG проверяващ за контраст. Без качване.
- Генератор на цветови схемиГенерирайте комплементарни, аналогови, триадни, тетрадни и монохроматични палитри от основен цвят. Без качване.
- Извличане на цветова палитраИзвличайте доминиращите цветове от изображение като HEX образци. Копирайте всеки цвят. Без качване.
- Симулатор на цветна слепотаСимулирайте протанопия, дейтеранопия, тританопия и ахроматопсия върху изображение. Без качване.
Често задавани въпроси
Каква е разликата между hex и RGB?
Това са два начина за записване на един и същ цвят. Hex побира червения, зеления и синия канал в шестсимволен код в основа 16, докато RGB изброява същите три канала като десетични числа от 0 до 255. #ff0000 и rgb(255, 0, 0) са едно и също червено. Hex е компактен и често срещан в CSS и файловете за дизайн, RGB се чете по-лесно от пръв поглед, а преобразуването между тях не променя нищо в самия цвят.
Как да разбера дали моите цветове са четливи за потребители с цветна слепота?
Прекарайте палитрата си през симулатор на цветна слепота, който преначертава цветовете ви така, както би ги видял човек с всеки от често срещаните типове цветно зрение. Следете за двойки, които се сливат в един и същ нюанс, особено червените и зелените. Най-безопасният навик е никога да не използвате цвета като единствен знак: подкрепете го с текст, икона или шарка, и поддържайте ясна разлика в светлотата между преден план и фон, така че смисълът да оцелее дори когато тонът не оцелее.