Cor nomeada · #F0A0B6
Emperor’s Children
Emperor’s Children é #F0A0B6: rgb(240 160 182), hsl(344 73% 78%), oklch(0.79 0.098 1.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Emperor’s Children color name →
#F0A0B6
oklch(0.79 0.098 1.7)
Conversões de cor
- HEX
- #f0a0b6
- RGB
- rgb(240 160 182)
- HSL
- hsl(344 73% 78%)
- HWB
- hwb(344 63% 6%)
- OKLCH
- oklch(0.79 0.098 1.7)
- OKLab
- oklab(0.79 0.098 0.003)
- CIE Lab
- lab(74.46 32.7 1.47)
- LCH
- lch(74.46 32.74 2.6)
- CMYK
- cmyk(0% 33% 24% 6%)
Tons claros · Sombras · Tons
Tons claros
- F2AABD
- F4B3C4
- F6BDCB
- F8C6D3
- FAD0DA
- FBD9E1
- FCE2E9
- FEECF0
- FEF5F7
Sombras
- D18B9E
- B27686
- 95616F
- 784E59
- 5D3B44
- 432930
- 2A191D
- 14090C
- 030102
Tons
- E59DB0
- DA9AAB
- CE97A5
- C394A0
- B8919B
- AD8D95
- A28A90
- 97878B
- 8B8385
Harmonias de cor
Complementar +180°
- F0A0B6
Emperor’s Children
- 6AD0BF
≈ Patina
Análoga -30° +30°
- F0A0B6
Emperor’s Children
- E0A3D7
≈ Exotic Violet
- F3A393
≈ Crushed Grapefruit
Tríade +120° +240°
- F0A0B6
Emperor’s Children
- B0C57D
≈ Valley View
- 80C3F5
≈ Nevermind Nirvana
Complementar dividida +150° +210°
- F0A0B6
Emperor’s Children
- 8ACD9B
≈ Fennel
- 66CCDF
≈ Betsy
Tétrade +90° +180° +270°
- F0A0B6
Emperor’s Children
- D2B96E
≈ Sweet Mustard
- 6AD0BF
≈ Patina
- A4B7FB
≈ Truesky Gloxym
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.01:1 · APCA Lc 39
Ag
AAASobre preto
WCAG 10.40:1 · APCA Lc 63
Melhor cor de texto: #000000
WCAG 10.40:1 (AAA) · APCA Lc 63
Contrast pairs
Trechos de código
CSS
:root {
--emperor-s-children: #f0a0b6;
--emperor-s-children-rgb: 240 160 182;
--emperor-s-children-oklch: oklch(0.79 0.098 1.7);
}
.element {
color: var(--emperor-s-children);
background-color: hsl(344 73% 78%);
border-color: oklch(0.79 0.098 1.7);
}Tailwind CSS v4
@theme {
--color-emperor-s-children: #f0a0b6;
--color-emperor-s-children-50: #ffeaf2;
--color-emperor-s-children-100: #ffdbe4;
--color-emperor-s-children-200: #fac3cf;
--color-emperor-s-children-300: #e3a3b2;
--color-emperor-s-children-400: #cf869a;
--color-emperor-s-children-500: #bb6981;
--color-emperor-s-children-600: #9e596e;
--color-emperor-s-children-700: #7f4758;
--color-emperor-s-children-800: #5e3341;
--color-emperor-s-children-900: #42232d;
--color-emperor-s-children-950: #2a121a;
}SCSS
$emperor-s-children: #f0a0b6;
$emperor-s-children-rgb: 240, 160, 182;
$emperor-s-children-light: mix(#fff, $emperor-s-children, 20%);
$emperor-s-children-dark: mix(#000, $emperor-s-children, 20%);
.element {
color: $emperor-s-children;
box-shadow: 0 0 0 2px rgba($emperor-s-children, 0.35);
}