Steel Blue

鋼青色（はがねあおいろ）

鋼青色は日本の伝統色で、炭素鋼を焼き入れした際に生じる酸化皮膜の色に由来します。藍色より深く、青と灰色が調和した格調高い色合いです。

鋼青色はがねあおいろ

Steel Blue

鋼青色は日本の伝統色で、炭素鋼を焼き入れした際に生じる酸化皮膜の色に由来します。藍色より深く、青と灰色が調和した格調高い色合いです。

#4682B4

HEX—16進数表記。Web・CSS・デザインツールで最も広く使われる形式

Short HEX — 各チャンネルが同じ2桁の場合に短縮可能

短縮不可

明暗バリエーション

#DAE6F0

#B5CDE1

#90B4D2

#6B9BC3

#386890

#2A4E6C

#1C3448

#0E1A24

TintShade

CSS Named Color — 最近傍（RGB 距離 0）

steelblue

コントラスト早見

4.11:1 白背景

✗ AA✓ AA Large✗ AAA✗ AAA Large

5.11:1 黒背景

✓ AA✓ AA Large✗ AAA✓ AAA Large

rgb(70, 130, 180)

RGB—赤・緑・青の光の三原色。各チャンネル0〜255で表現

正規化 RGB — 0〜1 で表現。シェーダー・Unity・Three.js で使用

vec3(0.275, 0.510, 0.706)

rgba() — CSS の rgba 表記（alpha 付き）

rgba(70, 130, 180, 1)

hsl(207, 44%, 49%)

HSL—色相・彩度・明度。人間の感覚に近い直感的な表現

207°

色相名 — 207° は青系

補色 — 色相 +180°（27°）

#B47746

hsb(207, 61%, 71%)

HSB—色相・彩度・明度（輝度）。Photoshopなどで採用される形式

207°

HSB は HSV（Hue / Saturation / Value）とも呼ばれる同一モデル。Photoshop のカラーピッカーはこの値を直接入力できる

#4682B4

HEX—16進数表記。Web・CSS・デザインツールで最も広く使われる形式

Short HEX — 各チャンネルが同じ2桁の場合に短縮可能

短縮不可

明暗バリエーション

#DAE6F0

#B5CDE1

#90B4D2

#6B9BC3

#386890

#2A4E6C

#1C3448

#0E1A24

TintShade

CSS Named Color — 最近傍（RGB 距離 0）

steelblue

コントラスト早見

4.11:1 白背景

✗ AA✓ AA Large✗ AAA✗ AAA Large

5.11:1 黒背景

✓ AA✓ AA Large✗ AAA✓ AAA Large

rgb(70, 130, 180)

RGB—赤・緑・青の光の三原色。各チャンネル0〜255で表現

正規化 RGB — 0〜1 で表現。シェーダー・Unity・Three.js で使用

vec3(0.275, 0.510, 0.706)

rgba() — CSS の rgba 表記（alpha 付き）

rgba(70, 130, 180, 1)

hsl(207, 44%, 49%)

HSL—色相・彩度・明度。人間の感覚に近い直感的な表現

207°

色相名 — 207° は青系

補色 — 色相 +180°（27°）

#B47746

hsb(207, 61%, 71%)

HSB—色相・彩度・明度（輝度）。Photoshopなどで採用される形式

207°

HSB は HSV（Hue / Saturation / Value）とも呼ばれる同一モデル。Photoshop のカラーピッカーはこの値を直接入力できる