Benoemde kleur · #F19CBB
Amaranth Pink
Amaranth Pink is #F19CBB: rgb(241 156 187), hsl(338 75% 78%), oklch(0.786 0.108 356.4). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Red mean? → · Amaranth Pink color name →
#F19CBB
oklch(0.786 0.108 356.4)
Kleurconversies
- HEX
- #f19cbb
- RGB
- rgb(241 156 187)
- HSL
- hsl(338 75% 78%)
- HWB
- hwb(338 61% 5%)
- OKLCH
- oklch(0.786 0.108 356.4)
- OKLab
- oklab(0.786 0.108 -0.007)
- CIE Lab
- lab(73.81 35.59 -2.18)
- LCH
- lch(73.81 35.65 356.5)
- CMYK
- cmyk(0% 35% 22% 5%)
Tinten · Schaduwen · Tonen
Tinten
- F3A6C2
- F5B0C8
- F7BACF
- F9C4D6
- FBCEDD
- FCD8E3
- FDE1EA
- FEEBF1
- FFF5F8
Schaduwen
- D287A2
- B3738A
- 955F73
- 794C5C
- 5D3946
- 432832
- 2B181F
- 14090D
- 030102
Tonen
- E699B5
- DA97AF
- CF94A9
- C492A3
- B98F9D
- AD8C97
- A28991
- 97868B
- 8B8386
Kleurharmonieën
Complementair +180°
- F19CBB
Amaranth Pink
- 62D0B7
≈ Sweet Garden
Analoog -30° +30°
- F19CBB
Amaranth Pink
- DEA1DE
≈ Plum Juice
- F79E95
≈ Peach Amber
Triadisch +120° +240°
- F19CBB
Amaranth Pink
- B5C270
≈ Avocado Cream
- 71C4F5
≈ Blue Mana
Gesplitst complementair +150° +210°
- F19CBB
Amaranth Pink
- 8BCC90
≈ Good Luck Charm
- 55CDDC
≈ Watercourse
Tetradisch +90° +180° +270°
- F19CBB
Amaranth Pink
- D8B564
≈ Strike It Rich
- 62D0B7
≈ Sweet Garden
- 9AB8FF
≈ Truesky Gloxym
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.05:1 · APCA Lc 40
Ag
AAAOp zwart
WCAG 10.21:1 · APCA Lc 62
Beste tekstkleur: #000000
WCAG 10.21:1 (AAA) · APCA Lc 62
Contrast pairs
Codefragmenten
CSS
:root {
--amaranth-pink: #f19cbb;
--amaranth-pink-rgb: 241 156 187;
--amaranth-pink-oklch: oklch(0.786 0.108 356.4);
}
.element {
color: var(--amaranth-pink);
background-color: hsl(338 75% 78%);
border-color: oklch(0.786 0.108 356.4);
}Tailwind CSS v4
@theme {
--color-amaranth-pink: #f19cbb;
--color-amaranth-pink-50: #ffe9f5;
--color-amaranth-pink-100: #ffdae7;
--color-amaranth-pink-200: #fcc2d4;
--color-amaranth-pink-300: #e5a1b7;
--color-amaranth-pink-400: #d183a0;
--color-amaranth-pink-500: #bd6688;
--color-amaranth-pink-600: #a05773;
--color-amaranth-pink-700: #81455c;
--color-amaranth-pink-800: #5f3245;
--color-amaranth-pink-900: #43222f;
--color-amaranth-pink-950: #2b111c;
}SCSS
$amaranth-pink: #f19cbb;
$amaranth-pink-rgb: 241, 156, 187;
$amaranth-pink-light: mix(#fff, $amaranth-pink, 20%);
$amaranth-pink-dark: mix(#000, $amaranth-pink, 20%);
.element {
color: $amaranth-pink;
box-shadow: 0 0 0 2px rgba($amaranth-pink, 0.35);
}