Color Converter
Конвертуйте кольори між форматами HEX, RGB, HSL та HSV з візуальним селектором
Клацніть на колір для відкриття селектора
Або змініть будь-яке значення нижче
Що таке конвертація кольорів?
Конвертер кольорів перекладає значення кольору з одного запису в інший — наприклад, з HEX-триплета (#6366F1) у RGB-кортеж (99, 102, 241) або HSL-трійку (239, 84%, 67%). Той самий колір можна також записати як HSV-трійку (239, 59%, 95%). Кожен формат кодує один і той самий візуальний колір за допомогою різної математичної моделі; різні інструменти, мови програмування та API очікують різні формати залежно від контексту.
HEX і RGB описують колір як суміш червоного, зеленого та синього світла. HEX — це компактне шістнадцяткове представлення тих самих трьох значень каналів від 0 до 255, які RGB записує у десятковому вигляді. HSL (відтінок, насиченість, освітленість) та HSV (відтінок, насиченість, яскравість) перегруповують ту саму інформацію в циліндричну систему координат, де відтінок — це кут на колірному колі (0–360 градусів), а насиченість та освітленість або яскравість виражаються у відсотках. Це робить HSL та HSV інтуїтивнішими для таких завдань, як створення світліших або темніших відтінків того самого кольору.
Перетворення між цими форматами вимагає чітко визначеної математики. Специфікація W3C CSS Color Module Level 4 документує алгоритми, які браузери використовують для зведення будь-якого CSS-кольору до sRGB-триплета. Формули детерміновані: певний вхід завжди дає той самий результат, тому конвертації є без втрат, якщо значення не округлюються або не обрізаються. Більшість селекторів кольорів та інструментів дизайну покладаються на ці самі формули.
Навіщо використовувати цей конвертер кольорів?
Інструменти дизайну експортують кольори в одному форматі, CSS потребує іншого, а API, який ви викликаєте, очікує третього. Замість того щоб писати код конвертації або шукати потрібну формулу, вставте значення і отримайте всі формати одночасно.
Варіанти використання конвертера кольорів
Довідник форматів кольорів
У таблиці нижче перелічено п'ять найпоширеніших форматів кольорів, де той самий колір індиго (#6366F1) показано в кожному записі. HEX і RGB найширше підтримуються в CSS і JavaScript. HSL є кращим для тематизації, оскільки налаштування освітленості та насиченості є простим. HSV — це модель, яку використовують селектори кольорів більшості програм графічного дизайну.
| Формат | Приклад (індиго) | Канали | Поширене використання |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs RGB vs HSL
Усі три формати описують один і той самий колірний простір sRGB. Різниця полягає в тому, як вони розкривають дані, що впливає на читабельність і зручність маніпулювання в різних контекстах.
Приклади коду
Конвертація кольорів між HEX, RGB та HSL у поширених мовах та середовищах. У кожному прикладі використовується той самий колір індиго (#6366F1) для зручного порівняння.
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]
// RGB → HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255
const max = Math.max(r, g, b), min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return [0, 0, Math.round(l * 100)]
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]import colorsys
# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
h = hex_str.lstrip('#')
return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
hex_to_rgb('#6366f1') # → (99, 102, 241)
# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)
# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)package main
import (
"fmt"
"math"
)
func hexToRGB(hex string) (int, int, int) {
var r, g, b int
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
return r, g, b
}
func rgbToHSL(r, g, b int) (int, int, int) {
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, int(math.Round(l * 100))
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
case gf: h = (bf - rf) / d + 2
case bf: h = (rf - gf) / d + 4
}
return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}
func main() {
r, g, b := hexToRGB("#6366f1")
fmt.Println(r, g, b) // → 99 102 241
fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}/* Modern CSS supports multiple color formats natively */
/* HEX notation */
.button { color: #6366f1; }
/* RGB functional notation */
.button { color: rgb(99 102 241); }
/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }
/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }
/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }