最も近い色名 · #4E90BC
#4E90BC
最も近い色名: Canadian Tuxedo
#4E90BC（rgb(78 144 188)、hsl(204 45% 52%)、oklch(0.628 0.095 239.8)）に最も近い色名はCanadian Tuxedoです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#4E90BC
oklch(0.628 0.095 239.8)
カラー変換
- HEX
- #4e90bc
- RGB
- rgb(78 144 188)
- HSL
- hsl(204 45% 52%)
- HWB
- hwb(204 31% 26%)
- OKLCH
- oklch(0.628 0.095 239.8)
- OKLab
- oklab(0.628 -0.048 -0.082)
- CIE Lab
- lab(56.82 -11.82 -29.88)
- LCH
- lch(56.82 32.13 248.4)
- CMYK
- cmyk(59% 23% 0% 26%)
ティント · シェード · トーン
ティント
- 619BC3
- 73A6CA
- 84B1D1
- 96BCD7
- A7C7DE
- B9D2E5
- CADDEB
- DCE8F2
- EDF4F9
シェード
- 437DA3
- 386A8B
- 2D5773
- 23455D
- 193447
- 0F2432
- 07151F
- 02070D
- 000102
トーン
- 558FB6
- 5B8DB0
- 608CAA
- 668AA4
- 6B899E
- 6F8798
- 748592
- 78848C
- 7C8286
カラーハーモニー
補色 +180°
- 4E90BC
Canadian Tuxedo
- B37A4B
≈ Rocky Racoon
類似色 -30° +30°
- 4E90BC
Canadian Tuxedo
- 3098A8
≈ Aqua Dance
- 7286C2
≈ Violets Are Blue
トライアド +120° +240°
- 4E90BC
Canadian Tuxedo
- B77086
≈ Tapestry
- 81914D
≈ Camo
スプリットコンプリメンタリー +150° +210°
- 4E90BC
Canadian Tuxedo
- BB7266
≈ Azalea Pot
- 9F863F
≈ Madagascar
テトラード +90° +180° +270°
- 4E90BC
Canadian Tuxedo
- A973A4
≈ Orchid Kiss
- B37A4B
≈ Rocky Racoon
- 5D996A
≈ Wildness Mint
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.47:1 · APCA Lc 62
Ag
AA黒の上
WCAG 6.03:1 · APCA Lc 40
最適な文字色: #000000
WCAG 6.03:1 (AA) · APCA Lc 40
Contrast pairs
コードスニペット
CSS
:root {
--canadian-tuxedo: #4e90bc;
--canadian-tuxedo-rgb: 78 144 188;
--canadian-tuxedo-oklch: oklch(0.628 0.095 239.8);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(204 45% 52%);
border-color: oklch(0.628 0.095 239.8);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #4e90bc;
--color-canadian-tuxedo-50: #def9ff;
--color-canadian-tuxedo-100: #cdedff;
--color-canadian-tuxedo-200: #b1dafa;
--color-canadian-tuxedo-300: #8cbee4;
--color-canadian-tuxedo-400: #68a6d1;
--color-canadian-tuxedo-500: #438ebe;
--color-canadian-tuxedo-600: #3a78a1;
--color-canadian-tuxedo-700: #2e6081;
--color-canadian-tuxedo-800: #1e475f;
--color-canadian-tuxedo-900: #143143;
--color-canadian-tuxedo-950: #051d2b;
}SCSS
$canadian-tuxedo: #4e90bc;
$canadian-tuxedo-rgb: 78, 144, 188;
$canadian-tuxedo-light: mix(#fff, $canadian-tuxedo, 20%);
$canadian-tuxedo-dark: mix(#000, $canadian-tuxedo, 20%);
.element {
color: $canadian-tuxedo;
box-shadow: 0 0 0 2px rgba($canadian-tuxedo, 0.35);
}