Adlandırılmış renk · #CEBF9C
Tumbling Tumbleweed
Tumbling Tumbleweed, #CEBF9C: rgb(206 191 156), hsl(42 34% 71%), oklch(0.808 0.05 87.6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Tumbling Tumbleweed color name →
#CEBF9C
oklch(0.808 0.05 87.6)
Renk dönüşümleri
- HEX
- #cebf9c
- RGB
- rgb(206 191 156)
- HSL
- hsl(42 34% 71%)
- HWB
- hwb(42 61% 19%)
- OKLCH
- oklch(0.808 0.05 87.6)
- OKLab
- oklab(0.808 0.002 0.05)
- CIE Lab
- lab(77.93 1.41 19.75)
- LCH
- lch(77.93 19.8 85.9)
- CMYK
- cmyk(0% 7% 24% 19%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D3C5A6
- D8CCB0
- DDD2B9
- E1D8C3
- E6DFCD
- EBE5D7
- F0ECE1
- F5F2EB
- FAF9F5
Koyu tonlar
- B3A687
- 988D73
- 7F755F
- 665E4C
- 4E4839
- 383328
- 231F18
- 0F0D09
- 020201
Gri tonlar
- C6B999
- BEB297
- B6AC94
- AEA591
- A69F8E
- 9E998C
- 979389
- 8F8C86
- 878683
Renk uyumları
Tamamlayıcı +180°
- CEBF9C
Tumbling Tumbleweed
- B2C0E2
≈ Promise
Analog -30° +30°
- CEBF9C
Tumbling Tumbleweed
- DAB9A1
≈ Tracery
- BDC5A1
≈ Seagrass
Üçlü +120° +240°
- CEBF9C
Tumbling Tumbleweed
- 9BCAD1
≈ Surfside
- D3B5D1
≈ Lilac Haze
Bölünmüş tamamlayıcı +150° +210°
- CEBF9C
Tumbling Tumbleweed
- A3C6DD
≈ Mr Frosty
- C4BADD
≈ Melrose
Dörtlü +90° +180° +270°
- CEBF9C
Tumbling Tumbleweed
- 9ECBC0
≈ Tareyton
- B2C0E2
≈ Promise
- DCB3C0
≈ Pentalon
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.81:1 · APCA Lc 34
Ag
AAASiyah üzerinde
WCAG 11.55:1 · APCA Lc 69
En iyi metin rengi: #000000
WCAG 11.55:1 (AAA) · APCA Lc 69
Contrast pairs
Kod parçacıkları
CSS
:root {
--tumbling-tumbleweed: #cebf9c;
--tumbling-tumbleweed-rgb: 206 191 156;
--tumbling-tumbleweed-oklch: oklch(0.808 0.05 87.6);
}
.element {
color: var(--tumbling-tumbleweed);
background-color: hsl(42 34% 71%);
border-color: oklch(0.808 0.05 87.6);
}Tailwind CSS v4
@theme {
--color-tumbling-tumbleweed: #cebf9c;
--color-tumbling-tumbleweed-50: #fbf5e5;
--color-tumbling-tumbleweed-100: #eee7d5;
--color-tumbling-tumbleweed-200: #ddd4bd;
--color-tumbling-tumbleweed-300: #c1b79b;
--color-tumbling-tumbleweed-400: #ab9d7d;
--color-tumbling-tumbleweed-500: #948560;
--color-tumbling-tumbleweed-600: #7d7051;
--color-tumbling-tumbleweed-700: #645a41;
--color-tumbling-tumbleweed-800: #4a412e;
--color-tumbling-tumbleweed-900: #332d1f;
--color-tumbling-tumbleweed-950: #1f1a0f;
}SCSS
$tumbling-tumbleweed: #cebf9c;
$tumbling-tumbleweed-rgb: 206, 191, 156;
$tumbling-tumbleweed-light: mix(#fff, $tumbling-tumbleweed, 20%);
$tumbling-tumbleweed-dark: mix(#000, $tumbling-tumbleweed, 20%);
.element {
color: $tumbling-tumbleweed;
box-shadow: 0 0 0 2px rgba($tumbling-tumbleweed, 0.35);
}