Избор на цвят

Как да използвате избора на цвят

1. Щракнете върху пробата под Изберете цвят, за да отворите палитрата на браузъра си, и изберете цвят. Можете и да въведете или поставите стойност в полето Код на цвета: HEX код като #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) или CSS име като tomato.
2. Големият преглед се обновява веднага, а HEX кодът е написан в черно или бяло, което се чете по-добре върху този фон.
3. Под Цветови кодове копирайте нужния формат с бутона Копирай до него: HEX, RGB, HSL, HSV или CMYK.
4. Щракнете върху Случаен цвят, когато търсите вдъхновение, или върху Вземи от екрана (в браузъри, които го поддържат, като Chrome и Edge), за да вземете проба от всеки пиксел на екрана, включително от други прозорци.

Всичко се случва във вашия браузър: никакъв цвят или изображение не се изпраща никъде.

Какво означава всеки цветови код

• HEX е шестцифреният шестнадесетичен запис, използван в HTML и CSS. Всяка двойка цифри е един канал (червен, зелен, син) от 00 до FF, така че #1E90FF означава червено 30, зелено 144, синьо 255.
• RGB дава същите три канала като десетични числа от 0 до 255. Това очакват повечето дизайнерски програми и програмни библиотеки.
• HSL описва цвета чрез нюанс (ъгъл от 0° до 360° върху цветния кръг), наситеност и светлина. Удобен е, за да направите цвета по-светъл или по-тъмен, като промените едно число.
• HSV (наричан и HSB) използва нюанс, наситеност и стойност (яркост). Това е моделът зад цветните квадрати във Photoshop, Figma и много други редактори.
• CMYK изразява цвета като проценти на циан, магента, жълто и черно мастило.

За стойностите в CMYK

Кодовете в CMYK са опростено преобразуване: K = 1 − max(R, G, B), после C = (1 − R − K) / (1 − K), същото за M и Y. Това е стандартната учебникарска формула, но не използва ICC профил. Реалният печат зависи от печатната машина, хартията и мастилата, така че печатницата ще преобразува цветовете ви със собствен профил и резултатът може да се различава. Използвайте тези числа като отправна точка, а не като доказателство за печат.

Как да четем контраста

Под HEX кода прегледът показва Контраст върху бяло и Контраст върху черно, изчислени по формулата за относителна яркост на WCAG 2. Съотношение 4,5:1 или повече е нужно за обикновен основен текст на ниво AA, а 3:1 за едър текст и елементи на интерфейса. Ако цветът ви достига само 3:1 върху бяло, запазете го за големи заглавия или икони и използвайте по-тъмен нюанс за текст.

Съвети

• Можете да поставяте HEX кодове без #: 1e90ff също работи, както и кратки форми като f60.
• Стойности с прозрачност, като rgb(0 0 0 / 50%), се приемат; изборът на цвят показва непрозрачния цвят.
• Собственият диалог за цвят на браузъра е различен в различните системи. Ако ви трябва точна стойност, въвеждането ѝ в полето Код на цвета винаги е точно.