最も近い色名 · #4AA2DB
#4AA2DB
最も近い色名: High Blue
#4AA2DB（rgb(74 162 219)、hsl(204 67% 57%)、oklch(0.683 0.119 240.2)）に最も近い色名はHigh Blueです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#4AA2DB
oklch(0.683 0.119 240.2)
カラー変換
- HEX
- #4aa2db
- RGB
- rgb(74 162 219)
- HSL
- hsl(204 67% 57%)
- HWB
- hwb(204 29% 14%)
- OKLCH
- oklch(0.683 0.119 240.2)
- OKLab
- oklab(0.683 -0.059 -0.103)
- CIE Lab
- lab(63.11 -13.74 -37.45)
- LCH
- lch(63.11 39.89 249.9)
- CMYK
- cmyk(66% 26% 0% 14%)
ティント · シェード · トーン
ティント
- 5FABDF
- 73B5E3
- 85BEE7
- 97C8EB
- A9D1EE
- BADAF2
- CBE3F5
- DCEDF9
- EEF6FC
シェード
- 3F8CBE
- 3577A2
- 2A6387
- 204F6D
- 173C54
- 0E2A3C
- 061926
- 020A11
- 000102
トーン
- 529FD2
- 5A9CC9
- 6098C0
- 6695B7
- 6B92AE
- 708EA4
- 758B9B
- 798792
- 7C8489
カラーハーモニー
補色 +180°
- 4AA2DB
High Blue
- CE8646
≈ Melted Copper
類似色 -30° +30°
- 4AA2DB
High Blue
- 00ACC1
≈ Bahaman Sea
- 7D95E3
≈ Portage
トライアド +120° +240°
- 4AA2DB
High Blue
- D47896
≈ Minuette
- 90A449
≈ Arathi Highlands
スプリットコンプリメンタリー +150° +210°
- 4AA2DB
High Blue
- D97B6C
≈ Lei Flower
- B59534
≈ Mana
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.80:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.48:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--high-blue: #4aa2db;
--high-blue-rgb: 74 162 219;
--high-blue-oklch: oklch(0.683 0.119 240.2);
}
.element {
color: var(--high-blue);
background-color: hsl(204 67% 57%);
border-color: oklch(0.683 0.119 240.2);
}Tailwind CSS v4
@theme {
--color-high-blue: #4aa2db;
--color-high-blue-50: #d8faff;
--color-high-blue-100: #c6eeff;
--color-high-blue-200: #a8dbff;
--color-high-blue-300: #7fbfef;
--color-high-blue-400: #55a7de;
--color-high-blue-500: #238fcc;
--color-high-blue-600: #2179ad;
--color-high-blue-700: #1b618b;
--color-high-blue-800: #0d4766;
--color-high-blue-900: #083148;
--color-high-blue-950: #001d2f;
}SCSS
$high-blue: #4aa2db;
$high-blue-rgb: 74, 162, 219;
$high-blue-light: mix(#fff, $high-blue, 20%);
$high-blue-dark: mix(#000, $high-blue, 20%);
.element {
color: $high-blue;
box-shadow: 0 0 0 2px rgba($high-blue, 0.35);
}