色名 · #034A71
Broadwater Blue
Broadwater Blueは#034A71：rgb(3 74 113)、hsl(201 95% 23%)、oklch(0.391 0.09 241.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Broadwater Blue color name →
#034A71
oklch(0.391 0.09 241.5)
カラー変換
- HEX
- #034a71
- RGB
- rgb(3 74 113)
- HSL
- hsl(201 95% 23%)
- HWB
- hwb(201 1% 56%)
- OKLCH
- oklch(0.391 0.09 241.5)
- OKLab
- oklab(0.391 -0.043 -0.079)
- CIE Lab
- lab(29.24 -8.04 -28.51)
- LCH
- lch(29.24 29.62 254.2)
- CMYK
- cmyk(97% 35% 0% 56%)
ティント · シェード · トーン
ティント
- 265B7F
- 3F6C8D
- 567E9B
- 6D8FA9
- 85A1B7
- 9DB3C5
- B5C6D4
- CDD9E2
- E6ECF0
シェード
- 023F61
- 023552
- 012A43
- 012035
- 001727
- 000E1A
- 00060E
- 000204
- 000001
トーン
- 195073
- 285575
- 345B77
- 406078
- 4B667A
- 566B7B
- 60707D
- 6B767E
- 757B7F
カラーハーモニー
補色 +180°
- 034A71
Broadwater Blue
- 673800
≈ Brown
類似色 -30° +30°
- 034A71
Broadwater Blue
- 004F5A
≈ Kali Blue
- 344176
≈ Forbidden Blackberry
トライアド +120° +240°
- 034A71
Broadwater Blue
- 6B2E42
≈ Cherry Juice Red
- 3E4C06
≈ No Emissions Green
スプリットコンプリメンタリー +150° +210°
- 034A71
Broadwater Blue
- 6E3025
≈ Cypress Bark Red
- 554300
≈ Sugarloaf Brown
テトラード +90° +180° +270°
- 034A71
Broadwater Blue
- 60315B
≈ Spanish Plum
- 673800
≈ Brown
- 15532B
≈ Moor-Monster
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.45:1 · APCA Lc 91
Ag
Fail黒の上
WCAG 2.22:1 · APCA Lc 11
最適な文字色: #FFFFFF
WCAG 9.45:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--broadwater-blue: #034a71;
--broadwater-blue-rgb: 3 74 113;
--broadwater-blue-oklch: oklch(0.391 0.09 241.5);
}
.element {
color: var(--broadwater-blue);
background-color: hsl(201 95% 23%);
border-color: oklch(0.391 0.09 241.5);
}Tailwind CSS v4
@theme {
--color-broadwater-blue: #034a71;
--color-broadwater-blue-50: #e0f9ff;
--color-broadwater-blue-100: #cfecff;
--color-broadwater-blue-200: #b4d9f9;
--color-broadwater-blue-300: #90bde3;
--color-broadwater-blue-400: #6ca5cf;
--color-broadwater-blue-500: #4a8dbd;
--color-broadwater-blue-600: #3f789f;
--color-broadwater-blue-700: #326080;
--color-broadwater-blue-800: #22465e;
--color-broadwater-blue-900: #163142;
--color-broadwater-blue-950: #071d2a;
}SCSS
$broadwater-blue: #034a71;
$broadwater-blue-rgb: 3, 74, 113;
$broadwater-blue-light: mix(#fff, $broadwater-blue, 20%);
$broadwater-blue-dark: mix(#000, $broadwater-blue, 20%);
.element {
color: $broadwater-blue;
box-shadow: 0 0 0 2px rgba($broadwater-blue, 0.35);
}