Color con nombre · #DF00FF
Phlox
Phlox es #DF00FF: rgb(223 0 255), hsl(292 100% 50%), oklch(0.654 0.312 321.1). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Purple mean? → · Phlox color name →
#DF00FF
oklch(0.654 0.312 321.1)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- E442FF
- E960FF
- ED79FF
- F18FFF
- F4A3FF
- F7B6FF
- FAC9FF
- FCDBFF
- FEEDFF
Sombras
- C200DE
- A500BE
- 8A009E
- 6F0080
- 560063
- 3D0048
- 27002E
- 120016
- 020003
Tonos
- D630F3
- CD43E6
- C451DA
- BB5CCD
- B264C1
- A96CB4
- 9F72A7
- 95779A
- 8B7C8D
Armonías de color
Complementario +180°
- DF00FF
Phlox
- 26AE00
≈ Pikkoro Green
Análogo -30° +30°
Triádico +120° +240°
Complementario dividido +150° +210°
- DF00FF
Phlox
- 959800
≈ Pea Soup
- 00A986
≈ Simply Green
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.76:1 · APCA Lc 62
Ag
AASobre negro
WCAG 5.58:1 · APCA Lc 39
Mejor color de texto: #000000
WCAG 5.58:1 (AA) · APCA Lc 39
Contrast pairs
Fragmentos de código
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);
}