Benoemde kleur · #F0A0B6
Emperor’s Children
Emperor’s Children is #F0A0B6: rgb(240 160 182), hsl(344 73% 78%), oklch(0.79 0.098 1.7). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Red mean? → · Emperor’s Children color name →
#F0A0B6
oklch(0.79 0.098 1.7)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- F2AABD
- F4B3C4
- F6BDCB
- F8C6D3
- FAD0DA
- FBD9E1
- FCE2E9
- FEECF0
- FEF5F7
Schaduwen
- D18B9E
- B27686
- 95616F
- 784E59
- 5D3B44
- 432930
- 2A191D
- 14090C
- 030102
Tonen
- E59DB0
- DA9AAB
- CE97A5
- C394A0
- B8919B
- AD8D95
- A28A90
- 97878B
- 8B8385
Kleurharmonieën
Complementair +180°
- F0A0B6
Emperor’s Children
- 6AD0BF
≈ Patina
Analoog -30° +30°
- F0A0B6
Emperor’s Children
- E0A3D7
≈ Exotic Violet
- F3A393
≈ Crushed Grapefruit
Triadisch +120° +240°
- F0A0B6
Emperor’s Children
- B0C57D
≈ Valley View
- 80C3F5
≈ Nevermind Nirvana
Gesplitst complementair +150° +210°
- F0A0B6
Emperor’s Children
- 8ACD9B
≈ Fennel
- 66CCDF
≈ Betsy
Tetradisch +90° +180° +270°
- F0A0B6
Emperor’s Children
- D2B96E
≈ Sweet Mustard
- 6AD0BF
≈ Patina
- A4B7FB
≈ Truesky Gloxym
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.01:1 · APCA Lc 39
Ag
AAAOp zwart
WCAG 10.40:1 · APCA Lc 63
Beste tekstkleur: #000000
WCAG 10.40:1 (AAA) · APCA Lc 63
Contrast pairs
Codefragmenten
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);
}