Конвертер HEX RGB

Конвертуйте формати кольорів без здогадок

Значення кольорів часто переходять між інструментами, які віддають перевагу різним форматам. Дизайнер може передати токен HEX, CSS-анімації можуть знадобитися канали RGB, а коригувати тему найзручніше в HSL. Цей конвертер HEX RGB тримає поширені веб-формати синхронізованими: вводите наявну версію й копіюєте потрібну. Попередній перегляд наживо також робить помилки очевидними: якщо канал введено неправильно, перегляд одразу змінюється.

Конвертер підтримує щоденний робочий процес із CSS: шестизначний HEX, RGB, RGBA, HSL і HSLA. Альфа-канал керується окремо, бо прозорість зазвичай є дизайнерським рішенням, а не частиною токена фірмового кольору. Встановіть альфа на одиницю для непрозорих кольорів або зменште її, щоб створювати накладки, кільця фокусу, тіні та напівпрозорі фони з тим самим базовим відтінком.

Коли використовувати RGB, RGBA, HSL або HSLA

RGB — це пряме описання кольору екрана, і він корисний, коли ви звіряєте значення зі знімків екрана, виводу canvas або старіших дизайнерських інструментів. RGBA додає прозорість, що зручно для накладок і тонких рамок. HSL описує колір через відтінок, насиченість і світлість, тому він природніший, коли потрібно створити споріднені кольори: поверніть відтінок для нового акценту, зменште насиченість для приглушеного стану або збільште світлість для світлішого тону. HSLA додає той самий контроль альфа до цієї зрозумілішої моделі.

Надійні значення для CSS і дизайн-токенів

У дизайн-системах важлива узгодженість перетворень. Помилки округлення або скопійовані описки можуть створювати майже однакові кольори, які важко помітити, але складно підтримувати. Цей інструмент обмежує канали RGB допустимим діапазоном 0–255, тримає відсотки HSL у діапазоні 0–100 і форматує результат як готовий до вставлення CSS. Оскільки все працює локально, ви можете безпечно конвертувати кольори неопублікованих продуктів, палітри клієнтів або внутрішні токени бренду, нікуди їх не завантажуючи.