Nazwany kolor · #AC9D64
Whispering Grasslands
Whispering Grasslands to #AC9D64: rgb(172 157 100), hsl(48 30% 53%), oklch(0.696 0.078 95.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Whispering Grasslands color name →
#AC9D64
oklch(0.696 0.078 95.1)
Konwersje koloru
- HEX
- #ac9d64
- RGB
- rgb(172 157 100)
- HSL
- hsl(48 30% 53%)
- HWB
- hwb(48 39% 33%)
- OKLCH
- oklch(0.696 0.078 95.1)
- OKLab
- oklab(0.696 -0.007 0.078)
- CIE Lab
- lab(65.06 -0.37 31.88)
- LCH
- lch(65.06 31.88 90.7)
- CMYK
- cmyk(0% 9% 42% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B4A774
- BCB083
- C4BA92
- CCC4A2
- D5CDB1
- DDD7C0
- E5E1D0
- EEEBDF
- F6F5EF
Odcienie ciemniejsze
- 958856
- 7F7348
- 695F3B
- 544C2E
- 403A22
- 2D2816
- 1B180B
- 0B0903
- 010100
Tony
- A79A68
- A3976B
- 9F946E
- 9A9271
- 968F74
- 918C77
- 8D8979
- 89867C
- 84837E
Harmonie kolorów
Komplementarna +180°
- AC9D64
Whispering Grasslands
- 8F9ACE
≈ Velvet Robe
Analogowa -30° +30°
- AC9D64
Whispering Grasslands
- BF9369
≈ Burnished Caramel
- 92A670
≈ Lettuce Mound
Triada +120° +240°
- AC9D64
Whispering Grasslands
- 60AABB
≈ Verditer Blue
- BC8BB0
≈ Lavender Quartz
Komplementarna rozszczepiona +150° +210°
- AC9D64
Whispering Grasslands
- 74A3CB
≈ Shipmate
- A891C4
≈ Lilac Breeze
Tetrada +90° +180° +270°
- AC9D64
Whispering Grasslands
- 60ADA3
≈ Green Crush
- 8F9ACE
≈ Velvet Robe
- C78996
≈ Solid Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.70:1 · APCA Lc 52
Ag
AAANa czerni
WCAG 7.76:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.76:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--whispering-grasslands: #ac9d64;
--whispering-grasslands-rgb: 172 157 100;
--whispering-grasslands-oklch: oklch(0.696 0.078 95.1);
}
.element {
color: var(--whispering-grasslands);
background-color: hsl(48 30% 53%);
border-color: oklch(0.696 0.078 95.1);
}Tailwind CSS v4
@theme {
--color-whispering-grasslands: #ac9d64;
--color-whispering-grasslands-50: #fbf6dd;
--color-whispering-grasslands-100: #efe9cb;
--color-whispering-grasslands-200: #ddd5af;
--color-whispering-grasslands-300: #c2b88a;
--color-whispering-grasslands-400: #ad9e69;
--color-whispering-grasslands-500: #968646;
--color-whispering-grasslands-600: #7f713c;
--color-whispering-grasslands-700: #665b30;
--color-whispering-grasslands-800: #4c4221;
--color-whispering-grasslands-900: #342d16;
--color-whispering-grasslands-950: #201a07;
}SCSS
$whispering-grasslands: #ac9d64;
$whispering-grasslands-rgb: 172, 157, 100;
$whispering-grasslands-light: mix(#fff, $whispering-grasslands, 20%);
$whispering-grasslands-dark: mix(#000, $whispering-grasslands, 20%);
.element {
color: $whispering-grasslands;
box-shadow: 0 0 0 2px rgba($whispering-grasslands, 0.35);
}