Nazwany kolor · #F6E19C
Buttery Croissant
Buttery Croissant to #F6E19C: rgb(246 225 156), hsl(46 83% 79%), oklch(0.911 0.09 93.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Buttery Croissant color name →
#F6E19C
oklch(0.911 0.09 93.2)
Konwersje koloru
- HEX
- #f6e19c
- RGB
- rgb(246 225 156)
- HSL
- hsl(46 83% 79%)
- HWB
- hwb(46 61% 4%)
- OKLCH
- oklch(0.911 0.09 93.2)
- OKLab
- oklab(0.911 -0.005 0.09)
- CIE Lab
- lab(90.09 0.37 36.56)
- LCH
- lch(90.09 36.56 89.4)
- CMYK
- cmyk(0% 9% 37% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F7E4A7
- F8E7B1
- F9EABB
- FAEDC5
- FAF0CF
- FBF3D9
- FCF6E2
- FDF9EC
- FEFCF5
Odcienie ciemniejsze
- D6C487
- B7A773
- 988B5F
- 7B704C
- 5F5639
- 453E28
- 2C2718
- 151209
- 030201
Tony
- EAD79A
- DDCD97
- D1C395
- C5B992
- B9B090
- ADA68D
- A29C8A
- 969387
- 8B8983
Harmonie kolorów
Komplementarna +180°
- F6E19C
Buttery Croissant
- D8E0FF
≈ Contrail
Analogowa -30° +30°
- F6E19C
Buttery Croissant
- FFDAB9
≈ Peach Puff
- D6ECA9
≈ Faith
Triada +120° +240°
- F6E19C
Buttery Croissant
- A8EFFF
≈ Beyond the Clouds
- FFD1F6
≈ Shampoo
Komplementarna rozszczepiona +150° +210°
- F6E19C
Buttery Croissant
- C8E6FF
≈ Icy Landscape
- E8DAFF
≈ Lavender Savour
Tetrada +90° +180° +270°
- F6E19C
Buttery Croissant
- 9AF6E7
≈ Turquoise Pearl
- D8E0FF
≈ Contrail
- FFD5DE
≈ No Need to Blush
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.29:1 · APCA Lc 15
Ag
AAANa czerni
WCAG 16.16:1 · APCA Lc 89
Najlepszy kolor tekstu: #000000
WCAG 16.16:1 (AAA) · APCA Lc 89
Contrast pairs
Fragmenty kodu
CSS
:root {
--buttery-croissant: #f6e19c;
--buttery-croissant-rgb: 246 225 156;
--buttery-croissant-oklch: oklch(0.911 0.09 93.2);
}
.element {
color: var(--buttery-croissant);
background-color: hsl(46 83% 79%);
border-color: oklch(0.911 0.09 93.2);
}Tailwind CSS v4
@theme {
--color-buttery-croissant: #f6e19c;
--color-buttery-croissant-50: #fdf6d9;
--color-buttery-croissant-100: #f1e8c7;
--color-buttery-croissant-200: #e0d5a9;
--color-buttery-croissant-300: #c5b882;
--color-buttery-croissant-400: #b19d5e;
--color-buttery-croissant-500: #9b8538;
--color-buttery-croissant-600: #837031;
--color-buttery-croissant-700: #695a27;
--color-buttery-croissant-800: #4e411a;
--color-buttery-croissant-900: #362d11;
--color-buttery-croissant-950: #211a04;
}SCSS
$buttery-croissant: #f6e19c;
$buttery-croissant-rgb: 246, 225, 156;
$buttery-croissant-light: mix(#fff, $buttery-croissant, 20%);
$buttery-croissant-dark: mix(#000, $buttery-croissant, 20%);
.element {
color: $buttery-croissant;
box-shadow: 0 0 0 2px rgba($buttery-croissant, 0.35);
}