Benoemde kleur · #EFCF98
Sparkling Champagne
Sparkling Champagne is #EFCF98: rgb(239 207 152), hsl(38 73% 77%), oklch(0.869 0.08 80.8). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Orange mean? → · Sparkling Champagne color name →
#EFCF98
oklch(0.869 0.08 80.8)
Kleurconversies
- HEX
- #efcf98
- RGB
- rgb(239 207 152)
- HSL
- hsl(38 73% 77%)
- HWB
- hwb(38 60% 6%)
- OKLCH
- oklch(0.869 0.08 80.8)
- OKLab
- oklab(0.869 0.013 0.079)
- CIE Lab
- lab(84.91 6.03 31.75)
- LCH
- lch(84.91 32.32 79.3)
- CMYK
- cmyk(0% 13% 36% 6%)
Tinten · Schaduwen · Tonen
Tinten
- F1D4A3
- F2D9AD
- F4DEB8
- F6E2C2
- F7E7CC
- F9ECD6
- FAF1E1
- FCF6EB
- FDFAF5
Schaduwen
- D0B484
- B19970
- 947F5C
- 78674A
- 5C4F38
- 423827
- 2A2317
- 141008
- 030201
Tonen
- E3C796
- D8BF94
- CDB792
- C1AF90
- B6A78D
- AB9F8B
- A09788
- 958F86
- 8B8883
Kleurharmonieën
Complementair +180°
- EFCF98
Sparkling Champagne
- BCD5FF
≈ Ice Cold Stare
Analoog -30° +30°
- EFCF98
Sparkling Champagne
- FFC6A5
≈ Bright Citrus
- D6D99C
≈ Liminality
Triadisch +120° +240°
- EFCF98
Sparkling Champagne
- 93E4E9
≈ Aqua Fiesta
- ECC3F4
≈ Purple’s Baby Sister
Gesplitst complementair +150° +210°
- EFCF98
Sparkling Champagne
- 9DDEFF
≈ Columbia Blue
- D3CDFF
≈ Lavender Blue
Tetradisch +90° +180° +270°
- EFCF98
Sparkling Champagne
- 9EE5CD
≈ Aqua Wish
- BCD5FF
≈ Ice Cold Stare
- FEBFDA
≈ Cotton Candy
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.49:1 · APCA Lc 23
Ag
AAAOp zwart
WCAG 14.04:1 · APCA Lc 80
Beste tekstkleur: #000000
WCAG 14.04:1 (AAA) · APCA Lc 80
Contrast pairs
Codefragmenten
CSS
:root {
--sparkling-champagne: #efcf98;
--sparkling-champagne-rgb: 239 207 152;
--sparkling-champagne-oklch: oklch(0.869 0.08 80.8);
}
.element {
color: var(--sparkling-champagne);
background-color: hsl(38 73% 77%);
border-color: oklch(0.869 0.08 80.8);
}Tailwind CSS v4
@theme {
--color-sparkling-champagne: #efcf98;
--color-sparkling-champagne-50: #fff4dc;
--color-sparkling-champagne-100: #f5e6cb;
--color-sparkling-champagne-200: #e5d2ae;
--color-sparkling-champagne-300: #cbb489;
--color-sparkling-champagne-400: #b79a67;
--color-sparkling-champagne-500: #a18045;
--color-sparkling-champagne-600: #886d3b;
--color-sparkling-champagne-700: #6d572f;
--color-sparkling-champagne-800: #513f21;
--color-sparkling-champagne-900: #392b16;
--color-sparkling-champagne-950: #231907;
}SCSS
$sparkling-champagne: #efcf98;
$sparkling-champagne-rgb: 239, 207, 152;
$sparkling-champagne-light: mix(#fff, $sparkling-champagne, 20%);
$sparkling-champagne-dark: mix(#000, $sparkling-champagne, 20%);
.element {
color: $sparkling-champagne;
box-shadow: 0 0 0 2px rgba($sparkling-champagne, 0.35);
}