Избор на цвят
Изберете всеки цвят от изображение и получете веднага HEX, RGB, HSL, HSV и CMYK кодове.
Качете изображение, за да изберете цвят
Плъзнете и пуснете, поставете или прегледайте — PNG, JPG, WEBP или GIF
Съвет: можете да поставите изображение и с Ctrl/Cmd + V
Кодове на цветовете
Най-близко име на цвят: Royal Blue
Цветови хармонии
Проверка на контраста (WCAG)
Примерен текст
Запазени цветове
Все още няма запазени цветове — изберете един и натиснете „Запази цвят”.
Изборът на цвят (color picker) е инструмент, който ви позволява да „вземете“ произволен цвят от изображение и веднага да получите неговия точен код. Вместо да гадаете стойности или да сравнявате визуално, просто качвате снимка, кликвате върху желания пиксел с пипетата и виждате готовите кодове HEX, RGB, HSL, HSV и CMYK. Инструментът се използва масово от уеб дизайнери, front-end разработчици, печатари и всеки, който работи с брандинг материали, презентации или илюстрации и има нужда от точен, повторяем цвят.
Нашият избор на цвят е напълно безплатен и работи изцяло във вашия браузър — изображението, което качвате, никога не напуска устройството ви, което го прави подходящ и за поверителни или некомерсиални проекти. Освен четирите основни цветови модела, инструментът извлича автоматична цветова палитра от цялото изображение, генерира хармонични комбинации (допълващи, аналогични, триадични и други) и проверява контраста между два цвята според стандарта WCAG за достъпност.
Как да изберете цвят от изображение
- 1
Качете или плъзнете изображение
Качете снимка от устройството си, плъзнете я директно в браузъра или поставете URL адрес — поддържат се PNG, JPG, WEBP и GIF файлове.
- 2
Кликнете с пипетката върху пиксел
Използвайте инструмента пипетка и кликнете върху точната точка от изображението, чийто цвят искате да извлечете.
- 3
Прочетете и копирайте кодовете
Веднага виждате стойностите HEX, RGB, HSL, HSV и CMYK за избрания цвят и можете да копирате всяка от тях с един клик.
- 4
Извлечете палитра от изображението
Генерирайте автоматична цветова палитра от доминиращите цветове в цялата снимка — полезно за брандиране или дизайн на UI.
- 5
Генерирайте цветови хармонии
От избрания цвят създайте допълващи, аналогични, триадични, тетрадични или монохроматични комбинации за вашия дизайн.
- 6
Проверете WCAG контраста и запазете палитрата
Сравнете текст и фон за съответствие с WCAG, след което запазете любимите си цветове и експортирайте палитрата като CSS, JSON или PNG.
HEX, RGB, HSL, HSV и CMYK обяснени
Всеки цвят може да бъде записан по няколко различни начина, в зависимост от това къде ще се използва — уеб страница, дизайнерски софтуер или печатна машина. Таблицата по-долу показва основните цветови модели, техния формат и къде се прилагат най-добре.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Уеб дизайн и CSS код |
| RGB | rgb(59, 130, 246) | Показване на екрани |
| HSL | hsl(217, 91%, 60%) | Интуитивна настройка на нюанс, наситеност и светлина |
| HSV | hsv(217, 76%, 96%) | Дизайнерски инструменти и палитри |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Печат и полиграфия |
Уеб и UI дизайн
Дизайнерите използват избора на цвят, за да извлекат точни оттенъци от референтни изображения, мудборд снимки или лога, и да ги превърнат в последователна цветова схема за интерфейси и уеб сайтове.
Front-end разработка
Разработчиците копират HEX или RGB кодовете директно в CSS променливи (custom properties) или в темизиращи файлове, спестявайки време при изграждане на дизайн системи и компоненти.
Печат и брандиране
За визитки, брошури и опаковки е важен CMYK кодът, защото отразява как цветът реално ще изглежда при печат, за разлика от RGB, който е предназначен само за екрани.
Достъпност
Проверката на контраста между текст и фон по стандарта WCAG гарантира, че съдържанието ви е четимо за хора със зрителни увреждания и отговаря на изискванията за уеб достъпност.
Сравнението
Сравнихме нашия избор на цвят с популярния imagecolorpicker.com, за да покажем разликите в текущите функционалности.
| Цветови модели | HEX, RGB, HSL, HSV и CMYK едновременно | Основно HEX и RGB |
| CMYK за печат | Вграден CMYK код за всеки избран цвят | Няма директен CMYK изход |
| Проверка на WCAG контраст | Вграден инструмент за контраст с оценка AA/AAA | Не се предлага |
| Цветови хармонии | Автоматични допълващи, аналогични, триадични и други комбинации | Не се предлага |
| Реклами | Чист интерфейс без рекламни банери | Множество рекламни блокове около инструмента |
Често задавани въпроси
Как да избера цвят от изображение?
Качете изображението в инструмента, изберете пипетката и кликнете върху точния пиксел, чийто цвят искате. Кодовете HEX, RGB, HSL, HSV и CMYK се показват веднага и могат да бъдат копирани с един клик.
Какво е HEX цветови код?
HEX кодът е шестцифрено шестнадесетично число, предшествано от символа „#“ (например #3B82F6), което представя червения, зеления и синия компонент на даден цвят. Той е стандартният формат за задаване на цветове в HTML и CSS.
Как да преобразувам RGB в HEX?
Всяка от трите RGB стойности (червено, зелено, синьо, от 0 до 255) се преобразува в двуцифрено шестнадесетично число и се съединява в един низ след символа „#“. Нашият инструмент прави това автоматично — просто изберете цвят и вижте съответния HEX код в панела с резултати.
Как да създам цветова палитра от снимка?
След като качите изображението, натиснете бутона за извличане на палитра. Инструментът анализира цялата снимка и автоматично извежда набор от доминиращи цветове, които можете да запазите или експортирате.
Как да проверя цветовия контраст за достъпност?
Изберете цвят за текст и цвят за фон в секцията за проверка на контраста. Инструментът изчислява коефициента на контраст и показва дали комбинацията отговаря на нивата AA и AAA от стандарта WCAG за нормален и едър текст.
Инструментът безплатен ли е и запазва ли поверителността ми?
Да, изборът на цвят е напълно безплатен за неограничено ползване. Цялата обработка на изображението се извършва локално във вашия браузър — снимките ви не се качват на сървър, което гарантира пълна поверителност на вашите файлове.
