命名颜色 · #235C8E
Sapphire Lace
Sapphire Lace 即 #235C8E：rgb(35 92 142)、hsl(208 60% 35%)、oklch(0.463 0.101 248.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Sapphire Lace color name →
#235C8E
oklch(0.463 0.101 248.4)
颜色转换
- HEX
- #235c8e
- RGB
- rgb(35 92 142)
- HSL
- hsl(208 60% 35%)
- HWB
- hwb(208 14% 44%)
- OKLCH
- oklch(0.463 0.101 248.4)
- OKLab
- oklab(0.463 -0.037 -0.094)
- CIE Lab
- lab(37.27 -5.16 -33.63)
- LCH
- lch(37.27 34.03 261.3)
- CMYK
- cmyk(75% 35% 0% 44%)
浅色调 · 深色调 · 灰色调
浅色调
- 3A6C99
- 507BA5
- 658BB0
- 7A9BBC
- 90ABC7
- A6BCD2
- BBCCDD
- D2DDE9
- E8EEF4
深色调
- 1D4F7B
- 174268
- 113656
- 0C2A44
- 071F34
- 041424
- 010A15
- 000307
- 000001
灰色调
- 2F608D
- 39648C
- 43688B
- 4C6B8A
- 556F88
- 5E7387
- 677685
- 6F7984
- 787D82
配色和谐
互补色 +180°
- 235C8E
Sapphire Lace
- 7D4C01
≈ Gédéon Brown
类似色 -30° +30°
- 235C8E
Sapphire Lace
- 006378
≈ Atlantis Myth
- 4D5190
≈ Twilight
三角配色 +120° +240°
- 235C8E
Sapphire Lace
- 873E4D
≈ Burnt Russet
- 48631E
≈ Camouflage Green
分裂互补色 +150° +210°
- 235C8E
Sapphire Lace
- 87422C
≈ Olive Niçoise
- 675900
≈ Ayahuasca Vine
四角配色 +90° +180° +270°
- 235C8E
Sapphire Lace
- 7C406C
≈ Deep Commitment to Purple
- 7D4C01
≈ Gédéon Brown
- 126943
≈ Jewel
对比度与无障碍
Ag
AAA白底
WCAG 7.01:1 · APCA Lc 84
Ag
Fail黑底
WCAG 2.99:1 · APCA Lc 18
最佳文字颜色: #FFFFFF
WCAG 7.01:1 (AAA) · APCA Lc 84
Contrast pairs
代码片段
CSS
:root {
--sapphire-lace: #235c8e;
--sapphire-lace-rgb: 35 92 142;
--sapphire-lace-oklch: oklch(0.463 0.101 248.4);
}
.element {
color: var(--sapphire-lace);
background-color: hsl(208 60% 35%);
border-color: oklch(0.463 0.101 248.4);
}Tailwind CSS v4
@theme {
--color-sapphire-lace: #235c8e;
--color-sapphire-lace-50: #e0f8ff;
--color-sapphire-lace-100: #d0ebff;
--color-sapphire-lace-200: #b5d8ff;
--color-sapphire-lace-300: #91bcea;
--color-sapphire-lace-400: #6ea3d7;
--color-sapphire-lace-500: #4c8bc6;
--color-sapphire-lace-600: #4176a7;
--color-sapphire-lace-700: #345e86;
--color-sapphire-lace-800: #224563;
--color-sapphire-lace-900: #173046;
--color-sapphire-lace-950: #081c2d;
}SCSS
$sapphire-lace: #235c8e;
$sapphire-lace-rgb: 35, 92, 142;
$sapphire-lace-light: mix(#fff, $sapphire-lace, 20%);
$sapphire-lace-dark: mix(#000, $sapphire-lace, 20%);
.element {
color: $sapphire-lace;
box-shadow: 0 0 0 2px rgba($sapphire-lace, 0.35);
}