最も近い色名 · #346FD2
#346FD2
最も近い色名: Fading Night
#346FD2（rgb(52 111 210)、hsl(218 64% 51%)、oklch(0.556 0.165 260.1)）に最も近い色名はFading Nightです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#346FD2
oklch(0.556 0.165 260.1)
カラー変換
- HEX
- #346fd2
- RGB
- rgb(52 111 210)
- HSL
- hsl(218 64% 51%)
- HWB
- hwb(218 20% 18%)
- OKLCH
- oklch(0.556 0.165 260.1)
- OKLab
- oklab(0.556 -0.028 -0.162)
- CIE Lab
- lab(47.06 7.67 -57.78)
- LCH
- lch(47.06 58.29 277.6)
- CMYK
- cmyk(75% 47% 0% 18%)
ティント · シェード · トーン
ティント
- 497ED8
- 5D8DDD
- 719BE2
- 84AAE7
- 98B8EC
- ACC6F0
- C1D4F4
- D5E3F8
- EAF1FC
シェード
- 2C60B6
- 24519B
- 1C4281
- 153468
- 0E2750
- 071A39
- 030E24
- 010410
- 000102
トーン
- 3D72CA
- 4674C3
- 4E77BB
- 5579B3
- 5D7AAB
- 647CA3
- 6B7D9A
- 727E92
- 797F89
カラーハーモニー
補色 +180°
- 346FD2
Fading Night
- 966A00
≈ Gamboge Brown
類似色 -30° +30°
- 346FD2
Fading Night
- 007EA8
≈ Oh so Vo
- 755CCB
≈ Astro Purple
トライアド +120° +240°
- 346FD2
Fading Night
- C13F49
≈ Poppy
- 32891B
≈ Summer Forest Green
スプリットコンプリメンタリー +150° +210°
- 346FD2
Fading Night
- B45300
≈ Obscure Orange
- 787900
≈ Mongolian Plateau
テトラード +90° +180° +270°
- 346FD2
Fading Night
- B64180
≈ Razzle Dazzle
- 966A00
≈ Gamboge Brown
- 00886A
≈ Celtic Queen
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.82:1 · APCA Lc 73
Ag
Fail黒の上
WCAG 4.35:1 · APCA Lc 29
最適な文字色: #FFFFFF
WCAG 4.82:1 (AA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--fading-night: #346fd2;
--fading-night-rgb: 52 111 210;
--fading-night-oklch: oklch(0.556 0.165 260.1);
}
.element {
color: var(--fading-night);
background-color: hsl(218 64% 51%);
border-color: oklch(0.556 0.165 260.1);
}Tailwind CSS v4
@theme {
--color-fading-night: #346fd2;
--color-fading-night-50: #dcf6ff;
--color-fading-night-100: #cae9ff;
--color-fading-night-200: #aed5ff;
--color-fading-night-300: #89b7ff;
--color-fading-night-400: #629dff;
--color-fading-night-500: #3f81f1;
--color-fading-night-600: #366ecb;
--color-fading-night-700: #2b58a4;
--color-fading-night-800: #19417a;
--color-fading-night-900: #102d56;
--color-fading-night-950: #04193a;
}SCSS
$fading-night: #346fd2;
$fading-night-rgb: 52, 111, 210;
$fading-night-light: mix(#fff, $fading-night, 20%);
$fading-night-dark: mix(#000, $fading-night, 20%);
.element {
color: $fading-night;
box-shadow: 0 0 0 2px rgba($fading-night, 0.35);
}