Конвертер цветов/ HEX · RGB · HSL · HSV · CMYK
Конвертируйте между форматами HEX, RGB, HSL, HSV и CMYK — с живым цветовым палитрой и палитрой оттенков.
HEX
Оттенки
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
Этот инструмент решил вашу проблему?
Примеры кода
CSS / Tailwind
/* CSS custom properties */
:root {
--color-primary: #3b82f6; /* HEX */
--color-primary-rgb: 59, 130, 246; /* RGB values only */
}
/* Usage */
.button {
background: var(--color-primary);
color: hsl(210, 40%, 98%); /* HSL */
border: 1px solid rgb(59 130 246 / 30%); /* CSS 4 syntax */
}
/* Tailwind config */
// tailwind.config.js
colors: { brand: '#3b82f6' }JavaScript
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
// RGB → HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).padStart(2, '0'))
.join('');
}
// npm: chroma-js (full-featured)
import chroma from 'chroma-js';
chroma('#3b82f6').rgb() // [59, 130, 246]
chroma('#3b82f6').hsl() // [0.58, 0.89, 0.60]
chroma.scale(['white','#3b82f6']).colors(6)Python
import colorsys
# HEX → RGB
hex_str = '#3b82f6'
rgb = tuple(int(hex_str[i:i+2], 16) for i in (1, 3, 5))
# (59, 130, 246)
# RGB → HSL (0-1 range)
r, g, b = (v / 255 for v in rgb)
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")
# pip install colour-science
import colour
colour.sRGB_to_XYZ([0.23, 0.51, 0.96])Swift / iOS
import SwiftUI
// HEX to Color
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(
in: .alphanumerics.inverted)
var int = UInt64()
Scanner(string: hex).scanHexInt64(&int)
let r = Double((int >> 16) & 0xFF) / 255
let g = Double((int >> 8) & 0xFF) / 255
let b = Double( int & 0xFF) / 255
self.init(red: r, green: g, blue: b)
}
}
Color(hex: "#3b82f6")Часто задаваемые вопросы
В чём разница между HEX, RGB и HSL?
HEX (шестнадцатеричный) — самый распространённый веб-формат, например #FF5733, по сути это RGB в системе счисления с основанием 16. RGB задаёт интенсивность красного, зелёного и синего каналов (0–255). HSL использует тон (Hue), насыщенность (Saturation) и светлоту (Lightness), что более интуитивно для настройки цветов.
В чём разница между HSV и HSL?
HSV (тон, насыщенность, значение/Value) и HSL (тон, насыщенность, светлота/Lightness) — модели цвета, ориентированные на восприятие человека. Ключевое отличие: в HSV V=100% — самый яркий чистый цвет. В HSL L=50% даёт самый чистый цвет, L=100% — белый, L=0% — чёрный. Photoshop и Figma используют HSB (≈ HSV), CSS использует HSL.
Что такое CMYK и почему его не используют в вебе?
CMYK (голубой, пурпурный, жёлтый, чёрный/Key) — цветовая модель полиграфии, основанная на субтрактивном смешении красок. Веб и экраны используют аддитивную модель RGB (смешение света). CSS не поддерживает CMYK нативно — дизайнеры конвертируют RGB в CMYK перед отправкой в типографию.
Как использовать HEX-цвета в CSS?
CSS принимает: 6-значный #RRGGBB (например, #3b82f6), сокращённый 3-значный #RGB (например, #38f = #3388ff) и 8-значный #RRGGBBAA для прозрачности (например, #3b82f680 = 50% непрозрачности). Современные браузеры также поддерживают синтаксис CSS Color Level 4 color(srgb ...).
Как вычисляется контрастность цветов?
WCAG рекомендует коэффициент контрастности не менее 4,5:1 (AA) или 7:1 (AAA) для основного текста относительно фона. Контрастность вычисляется через относительную яркость: линеаризуйте значения RGB, затем рассчитайте (L1 + 0,05) / (L2 + 0,05), где L1 — яркость более светлого цвета.
Как генерируются оттенки (Shades)?
Палитра оттенков сохраняет исходный тон (H) и насыщенность (S), изменяя светлоту HSL (L) по 6 значениям (от 90% до 15%). Это аналогично генерации цветовых палитр в Tailwind CSS — удобно для быстрого создания фирменной цветовой шкалы.