Cor nomeada · #FF878D
Tulip
Tulip é #FF878D: rgb(255 135 141), hsl(357 100% 76%), oklch(0.758 0.146 18). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Tulip color name →
#FF878D
oklch(0.758 0.146 18)
Conversões de cor
- HEX
- #ff878d
- RGB
- rgb(255 135 141)
- HSL
- hsl(357 100% 76%)
- HWB
- hwb(357 53% 0%)
- OKLCH
- oklch(0.758 0.146 18)
- OKLab
- oklab(0.758 0.138 0.045)
- CIE Lab
- lab(70.34 46.86 18.66)
- LCH
- lch(70.34 50.43 21.7)
- CMYK
- cmyk(0% 47% 45% 0%)
Tons claros · Sombras · Tons
Tons claros
- FF9498
- FFA0A3
- FFACAE
- FFB9BA
- FFC4C5
- FFD0D0
- FFDCDC
- FFE8E8
- FFF3F3
Sombras
- DE757A
- BE6367
- 9E5155
- 804144
- 633133
- 482123
- 2E1314
- 160607
- 030101
Tons
- F3878C
- E6878B
- DA8789
- CD8788
- C18687
- B48586
- A88484
- 9B8383
- 8D8281
Harmonias de cor
Complementar +180°
- FF878D
Tulip
- 00C9CE
≈ Tilla Kari Mosque
Análoga -30° +30°
- FF878D
Tulip
- F388C1
≈ Bubblegum Beam
- FA9158
≈ Umezome Pink
Tríade +120° +240°
- FF878D
Tulip
- 80C667
≈ Energise
- 7EB2FF
≈ French Sky Blue
Complementar dividida +150° +210°
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.30:1 · APCA Lc 45
Ag
AAASobre preto
WCAG 9.10:1 · APCA Lc 57
Melhor cor de texto: #000000
WCAG 9.10:1 (AAA) · APCA Lc 57
Contrast pairs
Trechos de código
CSS
:root {
--tulip: #ff878d;
--tulip-rgb: 255 135 141;
--tulip-oklch: oklch(0.758 0.146 18);
}
.element {
color: var(--tulip);
background-color: hsl(357 100% 76%);
border-color: oklch(0.758 0.146 18);
}Tailwind CSS v4
@theme {
--color-tulip: #ff878d;
--color-tulip-50: #ffe5e4;
--color-tulip-100: #ffd5d4;
--color-tulip-200: #ffbcba;
--color-tulip-300: #f99898;
--color-tulip-400: #e7787d;
--color-tulip-500: #d55661;
--color-tulip-600: #b44a52;
--color-tulip-700: #913b41;
--color-tulip-800: #6c2931;
--color-tulip-900: #4c1c21;
--color-tulip-950: #320b10;
}SCSS
$tulip: #ff878d;
$tulip-rgb: 255, 135, 141;
$tulip-light: mix(#fff, $tulip, 20%);
$tulip-dark: mix(#000, $tulip, 20%);
.element {
color: $tulip;
box-shadow: 0 0 0 2px rgba($tulip, 0.35);
}