命名颜色 · #DF00FF
Phlox
Phlox 即 #DF00FF：rgb(223 0 255)、hsl(292 100% 50%)、oklch(0.654 0.312 321.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Phlox color name →
#DF00FF
oklch(0.654 0.312 321.1)
颜色转换
- HEX
- #df00ff
- RGB
- rgb(223 0 255)
- HSL
- hsl(292 100% 50%)
- HWB
- hwb(292 0% 0%)
- OKLCH
- oklch(0.654 0.312 321.1)
- OKLab
- oklab(0.654 0.243 -0.196)
- CIE Lab
- lab(54.53 88.03 -69.9)
- LCH
- lch(54.53 112.4 321.5)
- CMYK
- cmyk(13% 100% 0% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- E442FF
- E960FF
- ED79FF
- F18FFF
- F4A3FF
- F7B6FF
- FAC9FF
- FCDBFF
- FEEDFF
深色调
- C200DE
- A500BE
- 8A009E
- 6F0080
- 560063
- 3D0048
- 27002E
- 120016
- 020003
灰色调
- D630F3
- CD43E6
- C451DA
- BB5CCD
- B264C1
- A96CB4
- 9F72A7
- 95779A
- 8B7C8D
配色和谐
互补色 +180°
- DF00FF
Phlox
- 26AE00
≈ Pikkoro Green
类似色 -30° +30°
三角配色 +120° +240°
分裂互补色 +150° +210°
- DF00FF
Phlox
- 959800
≈ Pea Soup
- 00A986
≈ Simply Green
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 3.76:1 · APCA Lc 62
Ag
AA黑底
WCAG 5.58:1 · APCA Lc 39
最佳文字颜色: #000000
WCAG 5.58:1 (AA) · APCA Lc 39
Contrast pairs
代码片段
CSS
:root {
--phlox: #df00ff;
--phlox-rgb: 223 0 255;
--phlox-oklch: oklch(0.654 0.312 321.1);
}
.element {
color: var(--phlox);
background-color: hsl(292 100% 50%);
border-color: oklch(0.654 0.312 321.1);
}Tailwind CSS v4
@theme {
--color-phlox: #df00ff;
--color-phlox-50: #ffd7ff;
--color-phlox-100: #ffc3ff;
--color-phlox-200: #ffa2ff;
--color-phlox-300: #ff72ff;
--color-phlox-400: #eb3cff;
--color-phlox-500: #da00fd;
--color-phlox-600: #b800d5;
--color-phlox-700: #9400ac;
--color-phlox-800: #6c0084;
--color-phlox-900: #4c005d;
--color-phlox-950: #320040;
}SCSS
$phlox: #df00ff;
$phlox-rgb: 223, 0, 255;
$phlox-light: mix(#fff, $phlox, 20%);
$phlox-dark: mix(#000, $phlox, 20%);
.element {
color: $phlox;
box-shadow: 0 0 0 2px rgba($phlox, 0.35);
}