命名颜色 · #333344
Shuriken
Shuriken 即 #333344：rgb(51 51 68)、hsl(240 14% 23%)、oklch(0.328 0.03 284.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Shuriken color name →
#333344
oklch(0.328 0.03 284.6)
颜色转换
- HEX
- #333344
- RGB
- rgb(51 51 68)
- HSL
- hsl(240 14% 23%)
- HWB
- hwb(240 20% 73%)
- OKLCH
- oklch(0.328 0.03 284.6)
- OKLab
- oklab(0.328 0.008 -0.029)
- CIE Lab
- lab(21.8 3.33 -10.65)
- LCH
- lch(21.8 11.16 287.4)
- CMYK
- cmyk(25% 25% 0% 73%)
浅色调 · 深色调 · 灰色调
浅色调
- 454555
- 575766
- 6A6A78
- 7E7E8A
- 92929D
- A7A7B0
- BCBCC3
- D2D2D7
- E8E8EB
深色调
- 2B2B3A
- 232330
- 1C1C26
- 14141D
- 0D0D14
- 07070C
- 030305
- 010102
- 000000
灰色调
- 3A3A4A
- 414250
- 494956
- 50515C
- 585861
- 606068
- 68686E
- 707074
- 78787A
配色和谐
互补色 +180°
- 333344
Shuriken
- 373624
≈ Devlan Mud Wash
类似色 -30° +30°
- 333344
Shuriken
- 2B3644
≈ Pacific Line
- 3B3040
≈ Disappearing Purple
三角配色 +120° +240°
- 333344
Shuriken
- 423028
≈ Chinese Ink
- 263A31
≈ Palm Green
分裂互补色 +150° +210°
- 333344
Shuriken
- 3E3324
≈ Devlan Mud Wash
- 2E3929
≈ Aimiru Brown
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 12.36:1 · APCA Lc 98
Ag
Fail黑底
WCAG 1.69:1 · APCA Lc 0
最佳文字颜色: #FFFFFF
WCAG 12.36:1 (AAA) · APCA Lc 98
Contrast pairs
代码片段
CSS
:root {
--shuriken: #333344;
--shuriken-rgb: 51 51 68;
--shuriken-oklch: oklch(0.328 0.03 284.6);
}
.element {
color: var(--shuriken);
background-color: hsl(240 14% 23%);
border-color: oklch(0.328 0.03 284.6);
}Tailwind CSS v4
@theme {
--color-shuriken: #333344;
--color-shuriken-50: #f4f4fe;
--color-shuriken-100: #e7e7f2;
--color-shuriken-200: #d3d3e1;
--color-shuriken-300: #b6b5c6;
--color-shuriken-400: #9c9cb0;
--color-shuriken-500: #83849a;
--color-shuriken-600: #6f7082;
--color-shuriken-700: #595968;
--color-shuriken-800: #41414d;
--color-shuriken-900: #2c2d35;
--color-shuriken-950: #1a1a20;
}SCSS
$shuriken: #333344;
$shuriken-rgb: 51, 51, 68;
$shuriken-light: mix(#fff, $shuriken, 20%);
$shuriken-dark: mix(#000, $shuriken, 20%);
.element {
color: $shuriken;
box-shadow: 0 0 0 2px rgba($shuriken, 0.35);
}