Nazwany kolor · #F5F5D9
Yellow Avarice
Yellow Avarice to #F5F5D9: rgb(245 245 217), hsl(60 58% 91%), oklch(0.963 0.037 107.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Yellow Avarice color name →
#F5F5D9
oklch(0.963 0.037 107.1)
Konwersje koloru
- HEX
- #f5f5d9
- RGB
- rgb(245 245 217)
- HSL
- hsl(60 58% 91%)
- HWB
- hwb(60 85% 4%)
- OKLCH
- oklch(0.963 0.037 107.1)
- OKLab
- oklab(0.963 -0.011 0.035)
- CIE Lab
- lab(95.99 -3.47 13.55)
- LCH
- lch(95.99 13.99 104.3)
- CMYK
- cmyk(0% 0% 11% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F6F6DD
- F7F7E1
- F8F8E4
- F9F9E8
- FAFAEC
- FBFBF0
- FCFCF4
- FDFDF7
- FEFEFB
Odcienie ciemniejsze
- D5D5BC
- B6B6A1
- 989886
- 7B7B6C
- 5F5F53
- 44443B
- 2B2B25
- 151511
- 030302
Tony
- E9E9D0
- DDDDC7
- D0D1BE
- C5C5B5
- B9B9AC
- ADADA3
- A2A29A
- 969691
- 8B8B89
Harmonie kolorów
Komplementarna +180°
- F5F5D9
Yellow Avarice
- F1F1FF
≈ Cloud Break
Analogowa -30° +30°
- F5F5D9
Yellow Avarice
- FFF1DC
≈ Flickering Light
- E8F9E1
≈ Lush Life
Triada +120° +240°
- F5F5D9
Yellow Avarice
- E4F6FF
≈ Kodama White
- FFEDF6
≈ Partial Pink
Komplementarna rozszczepiona +150° +210°
- F5F5D9
Yellow Avarice
- EBF3FF
≈ Placebo Blue
- FAEEFF
≈ Lovely Euphoric Delight
Tetrada +90° +180° +270°
- F5F5D9
Yellow Avarice
- D7FBFB
≈ Salt Mountain
- F1F1FF
≈ Cloud Break
- FFEEEE
≈ White Gloss
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.10:1 · APCA Lc 0
Ag
AAANa czerni
WCAG 18.94:1 · APCA Lc 100
Najlepszy kolor tekstu: #000000
WCAG 18.94:1 (AAA) · APCA Lc 100
Contrast pairs
Fragmenty kodu
CSS
:root {
--yellow-avarice: #f5f5d9;
--yellow-avarice-rgb: 245 245 217;
--yellow-avarice-oklch: oklch(0.963 0.037 107.1);
}
.element {
color: var(--yellow-avarice);
background-color: hsl(60 58% 91%);
border-color: oklch(0.963 0.037 107.1);
}Tailwind CSS v4
@theme {
--color-yellow-avarice: #f5f5d9;
--color-yellow-avarice-50: #f6f6ea;
--color-yellow-avarice-100: #e8e9db;
--color-yellow-avarice-200: #d5d6c4;
--color-yellow-avarice-300: #b8b9a4;
--color-yellow-avarice-400: #a0a088;
--color-yellow-avarice-500: #88886c;
--color-yellow-avarice-600: #73735c;
--color-yellow-avarice-700: #5c5c49;
--color-yellow-avarice-800: #444335;
--color-yellow-avarice-900: #2f2e24;
--color-yellow-avarice-950: #1c1b13;
}SCSS
$yellow-avarice: #f5f5d9;
$yellow-avarice-rgb: 245, 245, 217;
$yellow-avarice-light: mix(#fff, $yellow-avarice, 20%);
$yellow-avarice-dark: mix(#000, $yellow-avarice, 20%);
.element {
color: $yellow-avarice;
box-shadow: 0 0 0 2px rgba($yellow-avarice, 0.35);
}