色名 · #436175
Steel Blue Grey
Steel Blue Greyは#436175：rgb(67 97 117)、hsl(204 27% 36%)、oklch(0.477 0.048 238.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Steel Blue Grey color name →
#436175
oklch(0.477 0.048 238.3)
カラー変換
- HEX
- #436175
- RGB
- rgb(67 97 117)
- HSL
- hsl(204 27% 36%)
- HWB
- hwb(204 26% 54%)
- OKLCH
- oklch(0.477 0.048 238.3)
- OKLab
- oklab(0.477 -0.025 -0.041)
- CIE Lab
- lab(39.41 -7.11 -15.04)
- LCH
- lch(39.41 16.64 244.7)
- CMYK
- cmyk(43% 17% 0% 54%)
ティント · シェード · トーン
ティント
- 547082
- 667F8F
- 788E9D
- 8A9DAA
- 9DADB8
- B0BDC6
- C3CDD4
- D7DEE2
- EBEEF1
シェード
- 395365
- 2F4655
- 263946
- 1D2D37
- 142129
- 0C151C
- 050B0F
- 010305
- 000001
トーン
- 496476
- 506777
- 566A79
- 5C6D7A
- 62717B
- 68747C
- 6E777D
- 747A7E
- 7A7D7F
カラーハーモニー
補色 +180°
- 436175
Steel Blue Grey
- 725642
≈ Cinnamon Crumble
類似色 -30° +30°
- 436175
Steel Blue Grey
- 3B656B
≈ Smock Blue
- 515C78
≈ Vintage Indigo
トライアド +120° +240°
- 436175
Steel Blue Grey
- 74525D
≈ Ruby Grey
- 5A6142
≈ Lovers Pine
スプリットコンプリメンタリー +150° +210°
- 436175
Steel Blue Grey
- 76534E
≈ Terrace Brown
- 685C3D
≈ Plum Green
テトラード +90° +180° +270°
- 436175
Steel Blue Grey
- 6C536B
≈ Medicine Man
- 725642
≈ Cinnamon Crumble
- 4A654E
≈ Vizcaya Palm
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.55:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 3.20:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.55:1 (AA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--steel-blue-grey: #436175;
--steel-blue-grey-rgb: 67 97 117;
--steel-blue-grey-oklch: oklch(0.477 0.048 238.3);
}
.element {
color: var(--steel-blue-grey);
background-color: hsl(204 27% 36%);
border-color: oklch(0.477 0.048 238.3);
}Tailwind CSS v4
@theme {
--color-steel-blue-grey: #436175;
--color-steel-blue-grey-50: #e9f7ff;
--color-steel-blue-grey-100: #daeaf7;
--color-steel-blue-grey-200: #c3d7e7;
--color-steel-blue-grey-300: #a2bbce;
--color-steel-blue-grey-400: #85a3b8;
--color-steel-blue-grey-500: #698ba3;
--color-steel-blue-grey-600: #597689;
--color-steel-blue-grey-700: #475e6e;
--color-steel-blue-grey-800: #324551;
--color-steel-blue-grey-900: #223038;
--color-steel-blue-grey-950: #111c23;
}SCSS
$steel-blue-grey: #436175;
$steel-blue-grey-rgb: 67, 97, 117;
$steel-blue-grey-light: mix(#fff, $steel-blue-grey, 20%);
$steel-blue-grey-dark: mix(#000, $steel-blue-grey, 20%);
.element {
color: $steel-blue-grey;
box-shadow: 0 0 0 2px rgba($steel-blue-grey, 0.35);
}