最も近い色名 · #3BA4DC
#3BA4DC
最も近い色名: High Blue
#3BA4DC（rgb(59 164 220)、hsl(201 70% 55%)、oklch(0.683 0.125 236.4)）に最も近い色名はHigh Blueです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#3BA4DC
oklch(0.683 0.125 236.4)
カラー変換
- HEX
- #3ba4dc
- RGB
- rgb(59 164 220)
- HSL
- hsl(201 70% 55%)
- HWB
- hwb(201 23% 14%)
- OKLCH
- oklch(0.683 0.125 236.4)
- OKLab
- oklab(0.683 -0.069 -0.104)
- CIE Lab
- lab(63.28 -16.88 -37.78)
- LCH
- lch(63.28 41.38 245.9)
- CMYK
- cmyk(73% 25% 0% 14%)
ティント · シェード · トーン
ティント
- 55ADE0
- 6BB7E4
- 7FC0E8
- 92C9EB
- A5D2EF
- B7DBF2
- C9E4F6
- DBEDF9
- EDF6FC
シェード
- 328EBF
- 2979A3
- 216488
- 19506E
- 113D54
- 092B3C
- 041A26
- 010A11
- 000102
トーン
- 47A1D3
- 519DCA
- 5A9AC0
- 6196B7
- 6793AE
- 6D8FA5
- 738C9C
- 778892
- 7C8489
カラーハーモニー
補色 +180°
- 3BA4DC
High Blue
- D38345
≈ Clay Terrace
類似色 -30° +30°
- 3BA4DC
High Blue
- 00ADBD
≈ Placid Sea
- 7596E7
≈ Guilliman Blue
トライアド +120° +240°
- 3BA4DC
High Blue
- D5779B
≈ Wild Orchid
- 95A33F
≈ Arathi Highlands
スプリットコンプリメンタリー +150° +210°
- 3BA4DC
High Blue
- DC796F
≈ Lei Flower
- BB932B
≈ Nugget
テトラード +90° +180° +270°
- 3BA4DC
High Blue
- C17DC2
≈ Lavender Sweater
- D38345
≈ Clay Terrace
- 61AE69
≈ Algae
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.78:1 · APCA Lc 53
Ag
AAA黒の上
WCAG 7.52:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.52:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--high-blue: #3ba4dc;
--high-blue-rgb: 59 164 220;
--high-blue-oklch: oklch(0.683 0.125 236.4);
}
.element {
color: var(--high-blue);
background-color: hsl(201 70% 55%);
border-color: oklch(0.683 0.125 236.4);
}Tailwind CSS v4
@theme {
--color-high-blue: #3ba4dc;
--color-high-blue-50: #d5fbff;
--color-high-blue-100: #c2efff;
--color-high-blue-200: #a2ddff;
--color-high-blue-300: #77c1f0;
--color-high-blue-400: #49a9de;
--color-high-blue-500: #0091cd;
--color-high-blue-600: #017aad;
--color-high-blue-700: #05628b;
--color-high-blue-800: #004867;
--color-high-blue-900: #013248;
--color-high-blue-950: #001e2f;
}SCSS
$high-blue: #3ba4dc;
$high-blue-rgb: 59, 164, 220;
$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);
}