Конвертер цветов

Конвертируйте цвета между различными форматами, такими как HEX, RGB, HSL, CMYK. Поддерживает выбор цветов с помощью EyeDropper API, генерацию палитр и анализ цветовых схем.

Выбор цвета

Используйте выбор цвета для выбора цветов

Цветовые инструменты

Расширенные инструменты выбора и управления цветом

Форматы цветов

Текущий цвет в различных форматах представления

#
rgb(,,)
rgba(,,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

Палитра Tailwind CSS

Официальные цвета Tailwind CSS по умолчанию. Выберите формат, нажмите, чтобы скопировать, дважды нажмите, чтобы загрузить в палитру.

50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Объяснение форматов цветов

Узнайте о характеристиках и случаях использования различных форматов цветов

HEX Шестнадцатеричный

Использует 6-значные шестнадцатеричные числа для представления цветов, такие как #FF5733. Это наиболее часто используемый формат цвета в веб-разработке с лучшей совместимостью, подходящий для использования в CSS и HTML.

Формат:#RRGGBB
Диапазон:00-FF (0-255)
Преимущества:Краткий, хорошая совместимость
Недостатки:Не интуитивно

RGB Красный Зеленый Синий

Использует числовые значения красного, зеленого и синего цветовых каналов для представления цветов, такие как rgb(255, 87, 51). Этот формат интуитивен и легко понимается, подходит для дизайнеров и разработчиков, чтобы понять композицию цветов.

Формат:rgb(R, G, B)
Диапазон:0-255
Преимущества:Интуитивно, легко понять
Недостатки:Не представляет яркость интуитивно

RGBA Красный Зелёный Синий Альфа

Добавляет альфа-канал к RGB для прозрачности, например rgba(255, 87, 51, 0.8). Подходит для наложений, теней и других полупрозрачных эффектов.

Формат:rgba(R, G, B, A)
Диапазон:R,G,B: 0-255, A: 0-1
Преимущества:Поддерживает прозрачность, богатые визуальные эффекты
Недостатки:Совместимость немного хуже, чем у RGB

HSL Оттенок Насыщенность Яркость

Использует три атрибута оттенка, насыщенности и яркости для представления цветов, такие как hsl(12, 100%, 60%). Этот формат ближе к тому, как люди воспринимают цвета, облегчая настройку яркости и яркости цветов.

Формат:hsl(H, S%, L%)
Диапазон:H: 0-360°, S/L: 0-100%
Преимущества:Интуитивно, легко настраивать
Недостатки:Не представляет яркость интуитивно

HSV Оттенок Насыщенность Значение

Использует три атрибута оттенка, насыщенности и значения для представления цветов, такие как hsv(12, 100%, 100%). Этот формат обычно используется в графическом программном обеспечении, где параметр значения более интуитивно представляет яркость цвета.

Формат:hsv(H, S%, V%)
Диапазон:H: 0-360°, S/V: 0-100%
Преимущества:Значение интуитивно, легко настраивать
Недостатки:Ограниченная поддержка в веб-браузерах

CMYK Голубой Пурпурный Желтый Черный

Использует четыре цветовых канала голубого, пурпурного, желтого и черного для представления цветов, такие как cmyk(0%, 66%, 80%, 0%). Это стандартный формат в полиграфической промышленности, подходящий для дизайнерских работ, которые должны быть напечатаны.

Формат:cmyk(C%, M%, Y%, K%)
Диапазон:0-100%
Преимущества:Стандарт печати, профессиональный
Недостатки:Неточное отображение в веб

OKLCH Перцептивное цветовое пространство

Использует три атрибута перцептивной яркости, хроматичности и оттенка для представления цветов, такие как oklch(60% 50% 12). Это современное цветовое пространство, которое лучше соответствует восприятию человеческого глаза, поддерживает более широкую цветовую гамму и подходит для современных устройств отображения.

Формат:oklch(L% C% H)
Диапазон:L: 0-100%, C: 0-150, H: 0-360°
Преимущества:Перцептивно точно, широкая гамма
Недостатки:Ограниченная совместимость

Предложения по использованию

  • Веб-разработка: Приоритизируйте форматы HEX и RGB для лучшей совместимости
  • Настройка дизайна: Используйте формат HSL для легкой настройки оттенка и насыщенности
  • Профессиональная печать: Используйте формат CMYK для обеспечения качества печати
  • Современные приложения: Рассмотрите использование формата OKLCH для лучшей производительности цветов
  • Выбор цвета: Используйте ползунки HSV для интуитивного выбора цветов
  • Эффекты прозрачности: используйте формат RGBA для полупрозрачных наложений