Избор на цвят

Избор на цвят е безплатен инструмент, с който можеш да избереш цвят директно в браузъра и да получиш стойността му в необходимия формат.

Какъв резултат дава инструментът за избор на цвят?

Инструментът връща числово представяне на цвета, избран от цветното колело. Един и същ видим цвят може да бъде записан в няколко формата, най-често шестнадесетичен, RGB, RGBA, HSL или HSLA.

Тези формати описват цветовете по различни начини. Шестнадесетичният формат и RGB задават стойностите на червения, зеления и синия канал. HSL използва оттенък, наситеност и светлота, което улеснява систематичните корекции. Форматите с алфа канал описват и непрозрачността.

• Шестнадесетичните стойности започват със знак диез, последван от шестнадесетични цифри, например #336699.
• RGB стойностите обикновено представят всеки канал с число от 0 до 255, например rgb(51, 102, 153).
• HSL стойностите описват ъгъл на оттенъка и процентни стойности за наситеността и светлотата, например hsl(210, 50%, 40%).
• RGBA и HSLA добавят прозрачност. Алфа стойност 0 означава пълна прозрачност, а 1 означава пълна непрозрачност.

CSS поддържа и цветове, зададени с имена, но имената обхващат само фиксиран набор и са по-неподходящи за точни дизайн токени. Генерираните числови стойности обикновено се прехвърлят по-лесно между дизайн системи, таблици със стилове и програмен код.

Как се използва инструментът за избор на цвят?

Избери полето Цвят, посочи желаното място върху цветното колело и използвай получената стойност във формата, необходим за приложението ти. Всичко се извършва в браузъра, а избраният цвят никога не се качва на сървър.

Ако работиш по съществуващ интерфейс, започни с формата, който вече се използва в кодовата база. Така ще избегнеш ненужни преобразувания на цветовете и заявките за промени ще се преглеждат по-лесно. Когато проверяваш данни от трети страни, установи дали стойностите включват непрозрачност, преди да ги замениш с привидно равностоен цвят.

Практичният работен процес преди внедряване е да избереш или възпроизведеш желания цвят, да копираш подходящия запис и да го провериш в действителното състояние на компонента. Тествай поотделно нормалното състояние, състоянията при посочване и фокусиране, както и деактивираното състояние, защото непрозрачността и наследените стилове могат да променят крайния вид.

Как да разчетеш резултата

Разчети резултата според използвания цветови модел и провери алфа компонента, ако има такъв, преди да копираш стойността в кода. При RGB стойността на всеки канал управлява интензитета съответно на червения, зеления или синия компонент. При HSL оттенъкът се движи по цветното колело, наситеността определя интензитета на цвета, а светлотата задава баланса между черно и бяло.

Когато се използва в CSS или структурирани данни, синтаксисът на цветовете е строг. При ръчно редактиране често се допускат следните грешки:

• пропуска се началният знак диез от шестнадесетична CSS стойност;
• използват се пет или седем шестнадесетични цифри, които не са валидни стандартни дължини;
• поставят се проценти там, където реализацията на RGB очаква числови стойности за каналите;
• пропускат се запетаи в стария RGB синтаксис или се смесват несъвместими стар и съвременен синтаксис;
• стойност с алфа канал се копира в софтуер, който приема само шестцифрен шестнадесетичен формат;
• използва се десетична запетая, например 0,5, когато CSS изисква десетична точка, например 0.5.

Инструментът генерира цветови стойности, но не е универсален валидатор за CSS. Той не потвърждава, че цялата декларация, JSON документът или файлът с тема са валидни. Синтактичните грешки извън самата цветова стойност трябва да се проверят със съответния анализатор или инструмент за разработка.

Примери за преобразуване на цветове

При шестцифрения шестнадесетичен формат двойките цифри съответстват на червения, зеления и синия канал. Например следните записи описват един и същ непрозрачен цвят.

Шестнадесетична стойност #336699

Еквивалент в RGB rgb(51, 102, 153)

Еквивалент в HSL hsl(210, 50%, 40%)

Трицифреният шестнадесетичен запис е съкратен. Всяка цифра се повтаря, за да се получи шестцифрена стойност.

Кратка шестнадесетична стойност #fff

Разгънат шестнадесетичен запис #ffffff

Еквивалент в RGB rgb(255, 255, 255)

Осемцифреният шестнадесетичен формат включва алфа стойност след двойките за червения, зеления и синия канал. Внимавай при системи, които използват различен ред на каналите или не приемат осемцифрения запис. Един и същ плътен цвят на вид може да даде различен резултат, когато върху друг фон се приложи непрозрачност.

Кой цветови формат да избера?

Избери цветовия запис, който системата получател вече очаква, освен ако няма ясна причина да го промениш. Шестцифреният шестнадесетичен формат е компактен и често се използва в CSS променливи и файлове с дизайн токени. RGB е удобен, когато софтуерът предоставя директен достъп до стойностите на каналите, а HSL е полезен при създаване на сродни цветове чрез промяна на светлотата или наситеността.

• Използвай шестцифрен шестнадесетичен формат за непрозрачен уеб цвят, когато са важни краткият запис и лесната четимост.
• Използвай осемцифрен шестнадесетичен формат само когато целевата среда изрично поддържа алфа канал в този запис.
• Използвай RGB или RGBA, когато работиш с отделните червен, зелен и син канал.
• Използвай HSL или HSLA за програмно създавани варианти на тема въз основа на оттенък, наситеност или светлота.
• Използвай Конвертор на цветове, когато вече имаш стойност и трябва да я преобразуваш, вместо да избираш визуално нов цвят.

Не приемай показана на екрана RGB стойност за спецификация за печат. Професионалният печат може да изисква CMYK стойности, ICC цветови профил, пробен печат и съгласуване с печатницата. Само математическо преобразуване не може да гарантира, че отпечатаният цвят ще съвпадне с този на екран с подсветка.

Кога не е нужно да избирам или преобразувам цвят?

Не е нужно да избираш или преобразуваш цвят, ако съществуващата стойност вече е във формата, изискван от целевата система. Повторните преобразувания могат да внесат разлики от закръгляване, непоследователна употреба на главни и малки букви или ненужни промени в изходните файлове.

Понякога е по-добре да запазиш именуван дизайн токен, например променлива на темата, вместо да го заменяш с конкретна стойност. Токените съхраняват връзката между компонентите и позволяват даден цвят да се променя централизирано. По същия начин цвят, използван само от машина, не се нуждае от по-четим за хората запис, освен ако някой не трябва да го проверява или поддържа.

Никой инструмент за избор на цвят не може сам да определи дали избраният цвят осигурява достатъчен контраст, съответства на изискванията на дадена марка или остава различим за хора с нарушения в цветното зрение. Провери комбинациите от цвят на преден план и фон със специализиран инструмент за контраст и прегледай интерфейса в реалния му контекст.

Често задавани въпроси

Мога ли да използвам резултата в CSS променливи?

Да, стига избраният запис да е валиден CSS за браузърите и инструментите за компилиране, които поддържаш. Запази цялата стойност в потребителско свойство, след което я извикай с функцията var(). Ако проектът обработва каналите поотделно, може да е по-удобно да ги съхраняваш според вече установените в него правила.

Защо един и същ цвят изглежда различно на друг екран?

Екраните се различават по калибриране, яркост, технология на панела и поддръжка на цветови гами. Управлението на цветовете в браузъра и профилът на дисплея в операционната система също могат да повлияят на изобразяването. Затова еднаквите числови стойности не гарантират напълно еднакъв физически вид на всички устройства.

Главните и малките букви в шестнадесетичния запис променят ли цвета?

Не. При шестнадесетичните цифри няма разлика между главните и малките букви от A до F, затова #AABBCC и #aabbcc представят един и същ цвят. Спазвай начина на изписване, използван в хранилището, за да избегнеш промени само във форматирането.

Може ли цветовата стойност да съдържа букви с диакритични знаци или знаци извън латиницата?

Стандартният шестнадесетичен, RGB и HSL запис използва ASCII цифри, букви и пунктуация. Буквите с диакритични знаци и знаците извън латиницата не са част от този числов синтаксис за цветове. Те могат да присъстват в имената на околните променливи или в метаданните, ако съответният език и кодирането на файла ги позволяват.

Прозрачният цвят означава ли, че няма цвят?

Не. Напълно прозрачният цвят продължава да има стойности на каналите, въпреки че сами по себе си те не се виждат. Тези скрити стойности могат да имат значение при анимация, интерполация, наслагване или последваща промяна на непрозрачността, затова ги запази, когато приложението разчита на такова поведение.

Трябва ли да закръглям десетичните стойности на каналите?

Закръгляй десетичните стойности на цветните канали и алфа стойностите само до точността, която целевата система приема и която е необходима за последователен резултат. Прекалено голямата точност затруднява прегледа, а прекомерното закръгляване може да доведе до малка разлика в цвета. След закръгляване провери изобразения компонент спрямо предвидения фон и различните му интерактивни състояния.