Benoemde kleur · #F4ECC2
Transparent Beige
Transparent Beige is #F4ECC2: rgb(244 236 194), hsl(50 69% 86%), oklch(0.939 0.055 98.4). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Yellow mean? → · Transparent Beige color name →
#F4ECC2
oklch(0.939 0.055 98.4)
Kleurconversies
- HEX
- #f4ecc2
- RGB
- rgb(244 236 194)
- HSL
- hsl(50 69% 86%)
- HWB
- hwb(50 76% 4%)
- OKLCH
- oklch(0.939 0.055 98.4)
- OKLab
- oklab(0.939 -0.008 0.055)
- CIE Lab
- lab(93.25 -2.1 21.48)
- LCH
- lch(93.25 21.58 95.6)
- CMYK
- cmyk(0% 3% 20% 4%)
Tinten · Schaduwen · Tonen
Tinten
- F5EEC8
- F6F0CE
- F7F2D5
- F8F4DB
- F9F6E1
- FBF8E7
- FCF9ED
- FDFBF3
- FEFDF9
Schaduwen
- D4CDA8
- B5AF8F
- 979277
- 7A7660
- 5E5B49
- 444234
- 2B2920
- 14130E
- 030302
Tonen
- E8E1BB
- DCD6B5
- D0CAAE
- C4BFA7
- B8B5A1
- ADAA9A
- A19F94
- 96958D
- 8B8A87
Kleurharmonieën
Complementair +180°
- F4ECC2
Transparent Beige
- E6E9FF
≈ Glitter
Analoog -30° +30°
- F4ECC2
Transparent Beige
- FFE6CC
≈ Sinner’s City
- E0F3CB
≈ Green Glint
Triadisch +120° +240°
- F4ECC2
Transparent Beige
- CBF3FF
≈ Heaven’s Gate
- FFE0F5
≈ Fairy Salt
Gesplitst complementair +150° +210°
- F4ECC2
Transparent Beige
- DBEDFF
≈ Calcareous Sinter
- F2E4FF
≈ Minute Mauve
Tetradisch +90° +180° +270°
- F4ECC2
Transparent Beige
- C1F7F2
≈ Glacial Drift
- E6E9FF
≈ Glitter
- FFE3E6
≈ Royal Wedding
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.19:1 · APCA Lc 9
Ag
AAAOp zwart
WCAG 17.62:1 · APCA Lc 95
Beste tekstkleur: #000000
WCAG 17.62:1 (AAA) · APCA Lc 95
Contrast pairs
Codefragmenten
CSS
:root {
--transparent-beige: #f4ecc2;
--transparent-beige-rgb: 244 236 194;
--transparent-beige-oklch: oklch(0.939 0.055 98.4);
}
.element {
color: var(--transparent-beige);
background-color: hsl(50 69% 86%);
border-color: oklch(0.939 0.055 98.4);
}Tailwind CSS v4
@theme {
--color-transparent-beige: #f4ecc2;
--color-transparent-beige-50: #f8f6e4;
--color-transparent-beige-100: #ece9d4;
--color-transparent-beige-200: #d9d5bb;
--color-transparent-beige-300: #bdb998;
--color-transparent-beige-400: #a79f7a;
--color-transparent-beige-500: #8f875c;
--color-transparent-beige-600: #79724e;
--color-transparent-beige-700: #615b3e;
--color-transparent-beige-800: #48432c;
--color-transparent-beige-900: #322e1e;
--color-transparent-beige-950: #1e1b0e;
}SCSS
$transparent-beige: #f4ecc2;
$transparent-beige-rgb: 244, 236, 194;
$transparent-beige-light: mix(#fff, $transparent-beige, 20%);
$transparent-beige-dark: mix(#000, $transparent-beige, 20%);
.element {
color: $transparent-beige;
box-shadow: 0 0 0 2px rgba($transparent-beige, 0.35);
}