命名颜色 · #335287
Blue Quartz
Blue Quartz 即 #335287：rgb(51 82 135)、hsl(218 45% 36%)、oklch(0.441 0.095 260.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Blue Quartz color name →
#335287
oklch(0.441 0.095 260.5)
颜色转换
- HEX
- #335287
- RGB
- rgb(51 82 135)
- HSL
- hsl(218 45% 36%)
- HWB
- hwb(218 20% 47%)
- OKLCH
- oklch(0.441 0.095 260.5)
- OKLab
- oklab(0.441 -0.016 -0.094)
- CIE Lab
- lab(34.51 1.81 -33.69)
- LCH
- lch(34.51 33.74 273.1)
- CMYK
- cmyk(62% 39% 0% 47%)
浅色调 · 深色调 · 灰色调
浅色调
- 466293
- 59739F
- 6C84AB
- 8095B7
- 94A6C3
- A9B7CF
- BEC9DB
- D3DBE7
- E9EDF3
深色调
- 2B4675
- 233B63
- 1C2F51
- 142541
- 0D1A31
- 071121
- 030813
- 010206
- 000001
灰色调
- 3B5787
- 425C87
- 4A6186
- 526586
- 596A85
- 616E84
- 697383
- 707782
- 787C81
配色和谐
互补色 +180°
- 335287
Blue Quartz
- 6D4C00
≈ Antique Bronze
类似色 -30° +30°
- 335287
Blue Quartz
- 005B7A
≈ Job’s Tears
- 534883
≈ Victoria
三角配色 +120° +240°
- 335287
Blue Quartz
- 7F3B3C
≈ Wild Berry
- 335F2B
≈ Deep Into the Wood
分裂互补色 +150° +210°
- 335287
Blue Quartz
- 7C411B
≈ Walnut
- 565703
≈ Douro
四角配色 +90° +180° +270°
- 335287
Blue Quartz
- 793B5A
≈ Passionate Plum
- 6D4C00
≈ Antique Bronze
- 00624C
≈ Sci-Fi Takeout
对比度与无障碍
Ag
AAA白底
WCAG 7.78:1 · APCA Lc 87
Ag
Fail黑底
WCAG 2.69:1 · APCA Lc 15
最佳文字颜色: #FFFFFF
WCAG 7.78:1 (AAA) · APCA Lc 87
Contrast pairs
代码片段
CSS
:root {
--blue-quartz: #335287;
--blue-quartz-rgb: 51 82 135;
--blue-quartz-oklch: oklch(0.441 0.095 260.5);
}
.element {
color: var(--blue-quartz);
background-color: hsl(218 45% 36%);
border-color: oklch(0.441 0.095 260.5);
}Tailwind CSS v4
@theme {
--color-blue-quartz: #335287;
--color-blue-quartz-50: #e7f6ff;
--color-blue-quartz-100: #d7e9ff;
--color-blue-quartz-200: #bfd5fe;
--color-blue-quartz-300: #9db8e9;
--color-blue-quartz-400: #7e9fd7;
--color-blue-quartz-500: #6186c5;
--color-blue-quartz-600: #5272a6;
--color-blue-quartz-700: #425b86;
--color-blue-quartz-800: #2e4363;
--color-blue-quartz-900: #1f2e46;
--color-blue-quartz-950: #0f1b2d;
}SCSS
$blue-quartz: #335287;
$blue-quartz-rgb: 51, 82, 135;
$blue-quartz-light: mix(#fff, $blue-quartz, 20%);
$blue-quartz-dark: mix(#000, $blue-quartz, 20%);
.element {
color: $blue-quartz;
box-shadow: 0 0 0 2px rgba($blue-quartz, 0.35);
}