色名 · #0E9BD1
Structural Blue
Structural Blueは#0E9BD1：rgb(14 155 209)、hsl(197 87% 44%)、oklch(0.649 0.131 232.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Structural Blue color name →
#0E9BD1
oklch(0.649 0.131 232.8)
カラー変換
- HEX
- #0e9bd1
- RGB
- rgb(14 155 209)
- HSL
- hsl(197 87% 44%)
- HWB
- hwb(197 5% 18%)
- OKLCH
- oklch(0.649 0.131 232.8)
- OKLab
- oklab(0.649 -0.079 -0.104)
- CIE Lab
- lab(59.4 -19.76 -37.79)
- LCH
- lch(59.4 42.64 242.4)
- CMYK
- cmyk(93% 26% 0% 18%)
ティント · シェード · トーン
ティント
- 3DA5D6
- 59AFDB
- 70BAE0
- 86C4E5
- 9BCEE9
- AFD8EE
- C4E1F2
- D7EBF7
- EBF5FB
シェード
- 0B86B5
- 07729B
- 055E81
- 034B68
- 023950
- 012839
- 001823
- 000910
- 000102
トーン
- 2D99C9
- 3E96C1
- 4B94B9
- 5591B1
- 5E8FA9
- 668CA1
- 6D8999
- 748690
- 7A8388
カラーハーモニー
補色 +180°
- 0E9BD1
Structural Blue
- CC753A
≈ Wulfenite
類似色 -30° +30°
- 0E9BD1
Structural Blue
- 00A2AC
≈ Aare River Brienz
- 638DDE
≈ United Nations Blue
トライアド +120° +240°
- 0E9BD1
Structural Blue
- CA6A96
≈ Fuchsia Kiss
- 909625
≈ Turtle Moss
スプリットコンプリメンタリー +150° +210°
- 0E9BD1
Structural Blue
- D36B69
≈ Lippie
- B5860B
≈ Letter Jacket
テトラード +90° +180° +270°
- 0E9BD1
Structural Blue
- B472BD
≈ Lavendless
- CC753A
≈ Wulfenite
- 5BA357
≈ Muted Green
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.16:1 · APCA Lc 58
Ag
AA黒の上
WCAG 6.62:1 · APCA Lc 44
最適な文字色: #000000
WCAG 6.62:1 (AA) · APCA Lc 44
Contrast pairs
コードスニペット
CSS
:root {
--structural-blue: #0e9bd1;
--structural-blue-rgb: 14 155 209;
--structural-blue-oklch: oklch(0.649 0.131 232.8);
}
.element {
color: var(--structural-blue);
background-color: hsl(197 87% 44%);
border-color: oklch(0.649 0.131 232.8);
}Tailwind CSS v4
@theme {
--color-structural-blue: #0e9bd1;
--color-structural-blue-50: #d2fcff;
--color-structural-blue-100: #bef0ff;
--color-structural-blue-200: #9cdeff;
--color-structural-blue-300: #6fc2f1;
--color-structural-blue-400: #3aabdf;
--color-structural-blue-500: #0093ce;
--color-structural-blue-600: #007cae;
--color-structural-blue-700: #00638c;
--color-structural-blue-800: #004967;
--color-structural-blue-900: #003348;
--color-structural-blue-950: #001e2f;
}SCSS
$structural-blue: #0e9bd1;
$structural-blue-rgb: 14, 155, 209;
$structural-blue-light: mix(#fff, $structural-blue, 20%);
$structural-blue-dark: mix(#000, $structural-blue, 20%);
.element {
color: $structural-blue;
box-shadow: 0 0 0 2px rgba($structural-blue, 0.35);
}