🎨カラーコード変換
カラーコード（HEX）、RGB、HSL を相互に変換します。SwiftUI や Android・Flutter 用の書き方も出力し、背景色と文字色のコントラスト比（読みやすさ）もチェックできます。
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)RGB（0〜1）
0.231, 0.510, 0.965SwiftUI
Color(red: 0.231, green: 0.510, blue: 0.965)Android / Flutter
0xFF3B82F6文字色とのコントラスト比
この背景でこの文字は読みやすい？
コントラスト比 3.68 : 1 ⚠️ 大きな文字なら AA
カラーコードの形式
| 形式 | 例 |
|---|---|
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| SwiftUI | Color(red: 0.231, green: 0.510, blue: 0.965) |
| Android / Flutter | 0xFF3B82F6 |
よくある質問
- Q. カラーコードをRGBに変換するには？
- #3B82F6 なら、3B・82・F6 の2桁ずつを16進数から10進数に直して rgb(59, 130, 246) になります。このツールに入れれば自動で変換します。
- Q. HSLとは？
- 色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表す形式です。明るさだけ変えた色を作りたいときに便利です。
- Q. コントラスト比の基準は？
- Web アクセシビリティの基準（WCAG）では、通常の文字で 4.5:1 以上、大きな文字で 3:1 以上が推奨です。
- Q. 3桁のカラーコードとは？
- #FA0 のように各色1桁で書く省略形で、#FFAA00 と同じ意味です。