Which formats can I copy?

HEX (#rrggbb), CSS rgb(), and CSS hsl(). Values update live as you move the picker or RGB sliders.

Yes. Typing #39f expands to #3399ff (each digit is doubled). Use Sample to see that case. Forms with alpha (#rgba or #rrggbbaa) are rejected.

Is there an alpha / opacity channel?

No. This picker is opaque only. For rgba()/hsla() or 8-digit hex, use a design tool or write the alpha yourself in CSS.

Is anything uploaded?

No. Color conversion runs only in your browser.

Color Picker

HEX, RGB & HSL

Pick a color and convert between HEX, RGB, and HSL for CSS and design tokens. Supports #rgb shorthand—no alpha. Free online picker, no signup, browser-only.

This conversion runs only in your browser — nothing is uploaded.

Color

Hex

R59

G130

B246

HEX#3b82f6
RGB59,130,246
HSL217, 91%, 60%

Opaque colors only (HEX / RGB / HSL). No alpha channel — paste #rgb shorthand or full #rrggbb.

What is this tool?

This color picker turns a visual selection (or typed HEX) into CSS-ready HEX, RGB, and HSL values. The three formats describe the same opaque color in different coordinates used by stylesheets, design tokens, and documentation.

HEX is compact for tokens (#3b82f6). RGB exposes 0–255 channels. HSL (hue, saturation, lightness) is often easier when nudging related UI states. CSS #rgb shorthand is accepted and expanded to six digits.

Use it to copy values into CSS, sync a mock with implementation, or document a single brand swatch. For harmony sets from one seed, use the Color Palette Generator instead.

Common use cases

Copy a HEX/RGB/HSL token from a mock into CSS or a design-system file
Expand #rgb shorthand from older stylesheets into full #rrggbb
Tune RGB sliders while watching HEX and HSL stay in sync

How to use

Use the native color control or RGB sliders; the large swatch updates live.
Or type HEX (#39f or #3399ff). Invalid or alpha hex shows an error.
Press Sample to load #39f → #3399ff. Clear restores the default blue.
Copy HEX (toolbar) or copy RGB/HSL from the format rows.

Examples

Input / setting	Output	Notes
`#3b82f6` (default)	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	Tailwind-style blue as CSS values.
`#39f` (Sample)	`#3399ff` · `rgb(51, 153, 255)`	CSS `#rgb` shorthand expanded.
`#000`	`#000000` · `hsl(0, 0%, 0%)`	Black; 3-digit and 6-digit HEX match.
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	White; saturation is 0 in HSL.

Practical pitfalls

No alpha: #rgba, #rrggbbaa, rgba(), and hsla() are out of scope—write opacity in CSS separately.
HEX and HSL are rounded for display; tiny channel tweaks can leave HSL hue unstable near gray (low saturation).
Matching text/background contrast (WCAG) is not calculated here—verify in your design tool or an accessibility checker before shipping UI.

References

이 도구는 무엇인가요?

시각적으로 고른 색(또는 입력한 HEX)을 CSS용 HEX, RGB, HSL로 보여 줍니다. 세 형식은 같은 불투명 색을 서로 다른 좌표로 표현합니다.

HEX는 토큰에 짧고, RGB는 0–255 채널을, HSL은 관련 UI 상태를 미세 조정할 때 쓰기 쉽습니다. CSS #rgb 단축형을 받아 6자리로 확장합니다.

단일 스와치를 CSS·문서에 넣을 때 적합합니다. 한 색에서 하모니 팔레트가 필요하면 색상 팔레트 생성기를 쓰세요.

자주 쓰는 경우

시안의 HEX/RGB/HSL을 CSS·디자인 시스템 파일로 복사
구형 스타일시트의 #rgb를 #rrggbb로 풀기
RGB 슬라이더를 움직이며 HEX·HSL 동기화 확인

사용 방법

네이티브 컬러 컨트롤이나 RGB 슬라이더를 사용합니다. 큰 스와치가 바로 갱신됩니다.
또는 HEX(#39f / #3399ff)를 입력합니다. 잘못된 값·알파는 오류로 표시됩니다.
Sample은 #39f → #3399ff를 불러옵니다. Clear는 기본 파랑으로 돌립니다.
툴바에서 HEX를 복사하거나 형식별 행에서 RGB/HSL을 복사합니다.

예시

입력 / 설정	출력	참고
`#3b82f6` (기본)	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	기본 파랑 CSS 값.
`#39f` (Sample)	`#3399ff` · `rgb(51, 153, 255)`	`#rgb` 단축 확장.
`#000`	`#000000` · `hsl(0, 0%, 0%)`	검정.
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	흰색; HSL 채도 0.

실무에서 흔한 실수

알파 없음: #rgba/#rrggbbaa/rgba()/hsla()는 범위 밖입니다. 투명도는 CSS에 따로 적으세요.
HEX·HSL은 표시용으로 반올림됩니다. 채도가 낮은 회색 근처에서는 HSL 색상이 흔들릴 수 있습니다.
텍스트/배경 대비(WCAG) 는 계산하지 않습니다. 출시 전 디자인·접근성 도구로 확인하세요.

참고자료

このツールについて

視覚選択（または入力した HEX）を CSS 向けの HEX・RGB・HSL に変換します。3 形式は同じ不透明色を別座標で表します。

HEX はトークン向けに短く、RGB は 0–255 チャネル、HSL は関連 UI 状態の微調整に向きます。CSS の #rgb 短縮形を受け取り 6 桁に展開します。

単一スウォッチを CSS や文書に載せる用途向けです。シードからハーモニーが必要ならカラーパレット生成ツールを使ってください。

よくある用途

モックの HEX/RGB/HSL を CSS・デザインシステムへコピー
古いスタイルシートの #rgb を #rrggbb に展開
RGB スライダーを動かしながら HEX・HSL の同期を確認

使い方

ネイティブカラー入力または RGB スライダーを使います。大きなスウォッチが即座に更新されます。
または HEX（#39f / #3399ff）を入力します。不正値・アルファはエラーになります。
Sample は #39f → #3399ff を読み込みます。Clear は既定の青に戻します。
ツールバーで HEX、各行で RGB/HSL をコピーします。

例

入力 / 設定	出力	メモ
`#3b82f6`（既定）	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	既定ブルー。
`#39f`（Sample）	`#3399ff` · `rgb(51, 153, 255)`	`#rgb` 短縮の展開。
`#000`	`#000000` · `hsl(0, 0%, 0%)`	黒。
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	白。HSL 彩度 0。

実務での落とし穴

アルファなし: #rgba / #rrggbbaa / rgba() / hsla() は対象外。透明度は CSS で別途書いてください。
HEX・HSL は表示用に丸めます。低彩度のグレー付近では HSL の色相が不安定になり得ます。
テキスト/背景の コントラスト（WCAG） は計算しません。公開前にデザイン／アクセシビリティツールで確認してください。

参考資料

¿Qué es esta herramienta?

Convierte una selección visual (o HEX escrito) en valores HEX, RGB y HSL listos para CSS. Los tres formatos describen el mismo color opaco con coordenadas distintas.

HEX es compacto para tokens; RGB muestra canales 0–255; HSL facilita ajustar estados de UI. Se acepta el atajo CSS #rgb y se expande a seis dígitos.

Sirve para copiar un único swatch a CSS o documentación. Para armonías desde un color base, usa el generador de paletas.

Casos de uso comunes

Copiar HEX/RGB/HSL de un mock a CSS o un design system
Expandir #rgb antiguo a #rrggbb
Ajustar deslizadores RGB viendo HEX y HSL sincronizados

Cómo usar

Usa el control nativo o los deslizadores RGB; el swatch grande se actualiza al instante.
O escribe HEX (#39f / #3399ff). HEX inválido o con alfa muestra error.
Sample carga #39f → #3399ff. Clear restaura el azul por defecto.
Copia HEX en la barra o RGB/HSL en cada fila.

Ejemplos

Entrada / ajuste	Salida	Notas
`#3b82f6` (defecto)	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	Azul por defecto.
`#39f` (Sample)	`#3399ff` · `rgb(51, 153, 255)`	Atajo `#rgb` expandido.
`#000`	`#000000` · `hsl(0, 0%, 0%)`	Negro.
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	Blanco; saturación HSL 0.

Errores prácticos

Sin alfa: #rgba, #rrggbbaa, rgba() y hsla() quedan fuera—escribe la opacidad en CSS aparte.
HEX y HSL se redondean; cerca del gris (poca saturación) el tono HSL puede saltar.
No calcula contraste WCAG; verifícalo en tu herramienta de diseño o accesibilidad.

Referencias

Qu'est-ce que cet outil ?

Convertit une sélection visuelle (ou un HEX saisi) en valeurs HEX, RGB et HSL pour CSS. Les trois formats décrivent la même couleur opaque avec des coordonnées différentes.

HEX est compact pour les tokens ; RGB expose les canaux 0–255 ; HSL aide à ajuster des états UI proches. Le raccourci CSS #rgb est accepté et développé en six chiffres.

Adapté pour copier un seul nuancier vers CSS ou la doc. Pour des harmonies à partir d’une teinte, utilisez le générateur de palette.

Cas d'usage courants

Copier HEX/RGB/HSL d’une maquette vers CSS ou un design system
Développer un ancien #rgb en #rrggbb
Régler les curseurs RGB en voyant HEX et HSL synchronisés

Comment utiliser

Utilisez le sélecteur natif ou les curseurs RGB ; le grand nuancier se met à jour tout de suite.
Ou saisissez un HEX (#39f / #3399ff). HEX invalide ou avec alpha → erreur.
Sample charge #39f → #3399ff. Clear restaure le bleu par défaut.
Copiez HEX via la barre d’outils, ou RGB/HSL ligne par ligne.

Exemples

Entrée / réglage	Sortie	Notes
`#3b82f6` (défaut)	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	Bleu par défaut.
`#39f` (Sample)	`#3399ff` · `rgb(51, 153, 255)`	Raccourci `#rgb` développé.
`#000`	`#000000` · `hsl(0, 0%, 0%)`	Noir.
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	Blanc ; saturation HSL 0.

Pièges courants

Pas d’alpha : #rgba, #rrggbbaa, rgba() et hsla() hors périmètre—écrivez l’opacité en CSS à part.
HEX et HSL sont arrondis ; près du gris (faible saturation), la teinte HSL peut sauter.
Pas de calcul de contraste WCAG—vérifiez dans un outil design / accessibilité.

Références

这个工具是什么？

将可视化选取（或输入的 HEX）转为可用于 CSS 的 HEX、RGB、HSL。三种格式用不同坐标描述同一不透明色。

HEX 适合 token；RGB 展示 0–255 通道；HSL 便于微调相关 UI 状态。接受 CSS #rgb 简写并展开为六位。

适合把单个色块写入 CSS 或文档。若要从一种基色生成和谐色板，请用调色板生成器。

常见用途

将稿中的 HEX/RGB/HSL 复制到 CSS 或设计系统
把旧样式里的 #rgb 展开为 #rrggbb
拖动 RGB 滑块并同步查看 HEX、HSL

如何使用

使用原生取色或 RGB 滑块；大色块即时更新。
或输入 HEX（#39f / #3399ff）。无效或含透明度的 HEX 会报错。
Sample 加载 #39f → #3399ff。Clear 恢复默认蓝色。
在工具栏复制 HEX，或在各行复制 RGB/HSL。

示例

输入 / 设置	输出	说明
`#3b82f6`（默认）	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	默认蓝。
`#39f`（Sample）	`#3399ff` · `rgb(51, 153, 255)`	`#rgb` 简写展开。
`#000`	`#000000` · `hsl(0, 0%, 0%)`	黑色。
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	白色；HSL 饱和度为 0。

实践中的常见误区

无透明度： #rgba、#rrggbbaa、rgba()、hsla() 不在范围内——请在 CSS 中单独写透明度。
HEX 与 HSL 会为显示取整；接近灰色（低饱和度）时 HSL 色相可能跳动。
不计算文本/背景 对比度（WCAG）——上线前请用设计或无障碍工具检查。

参考资料

這個工具是什麼？

將視覺化選取（或輸入的 HEX）轉為可用於 CSS 的 HEX、RGB、HSL。三種格式以不同座標描述同一不透明色彩。

HEX 適合作為 token；RGB 顯示 0–255 通道；HSL 便於微調相關 UI 狀態。接受 CSS #rgb 簡寫並展開為六位。

適合把單一色票寫入 CSS 或文件。若要從一種基色產生和諧色盤，請用調色盤產生器。

常見用途

將稿中的 HEX/RGB/HSL 複製到 CSS 或設計系統
把舊樣式裡的 #rgb 展開為 #rrggbb
拖動 RGB 滑桿並同步查看 HEX、HSL

如何使用

使用原生取色或 RGB 滑桿；大色塊即時更新。
或輸入 HEX（#39f / #3399ff）。無效或含透明度的 HEX 會報錯。
Sample 載入 #39f → #3399ff。Clear 恢復預設藍色。
在工具列複製 HEX，或在各列複製 RGB/HSL。

範例

輸入 / 設定	輸出	說明
`#3b82f6`（預設）	`rgb(59, 130, 246)` · `hsl(217, 91%, 60%)`	預設藍。
`#39f`（Sample）	`#3399ff` · `rgb(51, 153, 255)`	`#rgb` 簡寫展開。
`#000`	`#000000` · `hsl(0, 0%, 0%)`	黑色。
`#ffffff`	`rgb(255, 255, 255)` · `hsl(0, 0%, 100%)`	白色；HSL 飽和度為 0。

實務上常見陷阱

無透明度： #rgba、#rrggbbaa、rgba()、hsla() 不在範圍內——請在 CSS 中另外寫透明度。
HEX 與 HSL 會為顯示取整；接近灰色（低飽和度）時 HSL 色相可能跳動。
不計算文字/背景 對比度（WCAG）——上線前請用設計或無障礙工具檢查。

參考資料

Last reviewed: 2026-07-27

Frequently asked questions

Which formats can I copy?: HEX (#rrggbb), CSS rgb(), and CSS hsl(). Values update live as you move the picker or RGB sliders.
Does: Yes. Typing #39f expands to #3399ff (each digit is doubled). Use Sample to see that case. Forms with alpha (#rgba or #rrggbbaa) are rejected.
Is there an alpha / opacity channel?: No. This picker is opaque only. For rgba()/hsla() or 8-digit hex, use a design tool or write the alpha yourself in CSS.
Is anything uploaded?: No. Color conversion runs only in your browser.