命名颜色 · #475663
Seal Blue
Seal Blue 即 #475663：rgb(71 86 99)、hsl(208 16% 33%)、oklch(0.445 0.028 244.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Seal Blue color name →
#475663
oklch(0.445 0.028 244.6)
颜色转换
- HEX
- #475663
- RGB
- rgb(71 86 99)
- HSL
- hsl(208 16% 33%)
- HWB
- hwb(208 28% 61%)
- OKLCH
- oklch(0.445 0.028 244.6)
- OKLab
- oklab(0.445 -0.012 -0.026)
- CIE Lab
- lab(35.65 -3.52 -9.59)
- LCH
- lch(35.65 10.21 249.9)
- CMYK
- cmyk(28% 13% 0% 61%)
浅色调 · 深色调 · 灰色调
浅色调
- 586571
- 697580
- 7A858F
- 8C969E
- 9EA7AE
- B1B8BE
- C4C9CE
- D7DBDE
- EBEDEE
深色调
- 3D4A55
- 323E47
- 28323A
- 1F272E
- 161C21
- 0D1216
- 06080B
- 020203
- 000000
灰色调
- 4D5A66
- 525E69
- 58626C
- 5D676F
- 636B72
- 696F74
- 6F7377
- 74777A
- 7A7C7D
配色和谐
互补色 +180°
- 475663
Seal Blue
- 5F5144
≈ Volcanic Island
类似色 -30° +30°
- 475663
Seal Blue
- 42585E
≈ Prussian
- 4F5364
≈ Mystical Shade
三角配色 +120° +240°
- 475663
Seal Blue
- 624E52
≈ Berry Wine
- 505746
≈ Castle Stone
分裂互补色 +150° +210°
- 475663
Seal Blue
- 634F4A
≈ Chocolate Pretzel
- 595442
≈ Ivy Green
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 7.55:1 · APCA Lc 86
Ag
Fail黑底
WCAG 2.77:1 · APCA Lc 16
最佳文字颜色: #FFFFFF
WCAG 7.55:1 (AAA) · APCA Lc 86
Contrast pairs
代码片段
CSS
:root {
--seal-blue: #475663;
--seal-blue-rgb: 71 86 99;
--seal-blue-oklch: oklch(0.445 0.028 244.6);
}
.element {
color: var(--seal-blue);
background-color: hsl(208 16% 33%);
border-color: oklch(0.445 0.028 244.6);
}Tailwind CSS v4
@theme {
--color-seal-blue: #475663;
--color-seal-blue-50: #eff6fd;
--color-seal-blue-100: #e1e9f1;
--color-seal-blue-200: #cbd6e0;
--color-seal-blue-300: #acb9c5;
--color-seal-blue-400: #91a1ae;
--color-seal-blue-500: #778998;
--color-seal-blue-600: #657481;
--color-seal-blue-700: #505c67;
--color-seal-blue-800: #3a444c;
--color-seal-blue-900: #282f35;
--color-seal-blue-950: #161b20;
}SCSS
$seal-blue: #475663;
$seal-blue-rgb: 71, 86, 99;
$seal-blue-light: mix(#fff, $seal-blue, 20%);
$seal-blue-dark: mix(#000, $seal-blue, 20%);
.element {
color: $seal-blue;
box-shadow: 0 0 0 2px rgba($seal-blue, 0.35);
}