Dichtstbijzijnde benoemde kleur · #F3BCAE
#F3BCAE
Dichtstbijzijnde benoemde kleur: Plushy Pink
#F3BCAE (rgb(243 188 174), hsl(12 74% 82%), oklch(0.841 0.067 34.7)) komt het dichtst bij de benoemde kleur Plushy Pink. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#F3BCAE
oklch(0.841 0.067 34.7)
Kleurconversies
- HEX
- #f3bcae
- RGB
- rgb(243 188 174)
- HSL
- hsl(12 74% 82%)
- HWB
- hwb(12 68% 5%)
- OKLCH
- oklch(0.841 0.067 34.7)
- OKLab
- oklab(0.841 0.055 0.038)
- CIE Lab
- lab(81.05 18.98 15.14)
- LCH
- lch(81.05 24.28 38.6)
- CMYK
- cmyk(0% 23% 28% 5%)
Tinten · Schaduwen · Tonen
Tinten
- F5C3B6
- F6C9BE
- F8D0C6
- F9D7CE
- FADDD6
- FBE4DE
- FCEBE6
- FDF2EF
- FEF8F7
Schaduwen
- D3A397
- B48B80
- 97736A
- 7A5D55
- 5E4741
- 44322E
- 2B1F1C
- 140D0B
- 030201
Tonen
- E7B6A9
- DBB0A5
- D0AAA0
- C4A49C
- B99E97
- AD9892
- A2928E
- 968C89
- 8B8685
Kleurharmonieën
Complementair +180°
- F3BCAE
Plushy Pink
- 98D7E6
≈ Oceano
Analoog -30° +30°
- F3BCAE
Plushy Pink
- F2B9C5
≈ Pink Grapefruit
- EAC39E
≈ Toasted Coconut
Triadisch +120° +240°
- F3BCAE
Plushy Pink
- A9D8B8
≈ Shanghai Jade
- BDC8F7
≈ Light Periwinkle
Gesplitst complementair +150° +210°
- F3BCAE
Plushy Pink
- 99DAD0
≈ Sweet Rhapsody
- A7D0F4
≈ Alphabet Blue
Tetradisch +90° +180° +270°
- F3BCAE
Plushy Pink
- C1D3A3
≈ Cricket Field
- 98D7E6
≈ Oceano
- D5C1EF
≈ York Plum
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOp zwart
WCAG 12.61:1 · APCA Lc 74
Beste tekstkleur: #000000
WCAG 12.61:1 (AAA) · APCA Lc 74
Contrast pairs
Codefragmenten
CSS
:root {
--plushy-pink: #f3bcae;
--plushy-pink-rgb: 243 188 174;
--plushy-pink-oklch: oklch(0.841 0.067 34.7);
}
.element {
color: var(--plushy-pink);
background-color: hsl(12 74% 82%);
border-color: oklch(0.841 0.067 34.7);
}Tailwind CSS v4
@theme {
--color-plushy-pink: #f3bcae;
--color-plushy-pink-50: #ffefe8;
--color-plushy-pink-100: #fde1d9;
--color-plushy-pink-200: #efcbc1;
--color-plushy-pink-300: #d7aca0;
--color-plushy-pink-400: #c29184;
--color-plushy-pink-500: #ae7668;
--color-plushy-pink-600: #936459;
--color-plushy-pink-700: #765047;
--color-plushy-pink-800: #573a34;
--color-plushy-pink-900: #3d2823;
--color-plushy-pink-950: #261612;
}SCSS
$plushy-pink: #f3bcae;
$plushy-pink-rgb: 243, 188, 174;
$plushy-pink-light: mix(#fff, $plushy-pink, 20%);
$plushy-pink-dark: mix(#000, $plushy-pink, 20%);
.element {
color: $plushy-pink;
box-shadow: 0 0 0 2px rgba($plushy-pink, 0.35);
}