最も近い色名 · #5A98C8
#5A98C8
最も近い色名: Canadian Tuxedo
#5A98C8（rgb(90 152 200)、hsl(206 50% 57%)、oklch(0.657 0.096 243.4)）に最も近い色名はCanadian Tuxedoです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#5A98C8
oklch(0.657 0.096 243.4)
カラー変換
- HEX
- #5a98c8
- RGB
- rgb(90 152 200)
- HSL
- hsl(206 50% 57%)
- HWB
- hwb(206 35% 22%)
- OKLCH
- oklch(0.657 0.096 243.4)
- OKLab
- oklab(0.657 -0.043 -0.086)
- CIE Lab
- lab(60.15 -10.18 -31.43)
- LCH
- lch(60.15 33.04 252.1)
- CMYK
- cmyk(55% 24% 0% 22%)
ティント · シェード · トーン
ティント
- 6BA2CE
- 7CACD4
- 8CB7D9
- 9DC1DF
- ADCBE4
- BDD6EA
- CDE0EF
- DEEAF5
- EEF5FA
シェード
- 4D84AE
- 417094
- 355C7B
- 294A63
- 1E384C
- 132736
- 091721
- 03080F
- 000102
トーン
- 5F96C1
- 6494BA
- 6891B2
- 6C8FAB
- 708DA4
- 748A9D
- 778896
- 7A858F
- 7D8387
カラーハーモニー
補色 +180°
- 5A98C8
Canadian Tuxedo
- BB8450
≈ Canvas
類似色 -30° +30°
- 5A98C8
Canadian Tuxedo
- 3AA1B5
≈ Aquatic Cool
- 7E8DCD
≈ Pansy Garden
トライアド +120° +240°
- 5A98C8
Canadian Tuxedo
- C3788B
≈ Japanese Coral
- 869B57
≈ Pine Leaves
スプリットコンプリメンタリー +150° +210°
- 5A98C8
Canadian Tuxedo
- C57B6A
≈ First Lady
- A59047
≈ Off the Grid
テトラード +90° +180° +270°
- 5A98C8
Canadian Tuxedo
- B57BAA
≈ Cheddar Pink Mauve
- BB8450
≈ Canvas
- 60A375
≈ Shiny Shamrock
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.10:1 · APCA Lc 58
Ag
AA黒の上
WCAG 6.76:1 · APCA Lc 44
最適な文字色: #000000
WCAG 6.76:1 (AA) · APCA Lc 44
Contrast pairs
コードスニペット
CSS
:root {
--canadian-tuxedo: #5a98c8;
--canadian-tuxedo-rgb: 90 152 200;
--canadian-tuxedo-oklch: oklch(0.657 0.096 243.4);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(206 50% 57%);
border-color: oklch(0.657 0.096 243.4);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #5a98c8;
--color-canadian-tuxedo-50: #dff9ff;
--color-canadian-tuxedo-100: #ceecff;
--color-canadian-tuxedo-200: #b3d9fc;
--color-canadian-tuxedo-300: #8ebde6;
--color-canadian-tuxedo-400: #6aa5d3;
--color-canadian-tuxedo-500: #478dc1;
--color-canadian-tuxedo-600: #3d77a3;
--color-canadian-tuxedo-700: #315f83;
--color-canadian-tuxedo-800: #204661;
--color-canadian-tuxedo-900: #153144;
--color-canadian-tuxedo-950: #061d2c;
}SCSS
$canadian-tuxedo: #5a98c8;
$canadian-tuxedo-rgb: 90, 152, 200;
$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);
}