Nazwany kolor · #CEB79D
Teddy Bears & Cream
Teddy Bears & Cream to #CEB79D: rgb(206 183 157), hsl(32 33% 71%), oklch(0.792 0.044 70.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Teddy Bears & Cream color name →
#CEB79D
oklch(0.792 0.044 70.5)
Konwersje koloru
- HEX
- #ceb79d
- RGB
- rgb(206 183 157)
- HSL
- hsl(32 33% 71%)
- HWB
- hwb(32 62% 19%)
- OKLCH
- oklch(0.792 0.044 70.5)
- OKLab
- oklab(0.792 0.015 0.042)
- CIE Lab
- lab(75.9 5.51 16.44)
- LCH
- lch(75.9 17.34 71.5)
- CMYK
- cmyk(0% 11% 24% 19%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D3BEA7
- D8C5B0
- DDCCBA
- E2D3C4
- E6DBCD
- EBE2D7
- F0E9E1
- F5F0EB
- FAF8F5
Odcienie ciemniejsze
- B39F88
- 988773
- 7F705F
- 665A4C
- 4E453A
- 383128
- 231E18
- 0F0C09
- 020201
Tony
- C6B19A
- BEAC97
- B6A694
- AEA192
- A69B8F
- 9F968C
- 979089
- 8F8B86
- 888583
Harmonie kolorów
Komplementarna +180°
- CEB79D
Teddy Bears & Cream
- A7BED7
≈ Canopy Bed
Analogowa -30° +30°
- CEB79D
Teddy Bears & Cream
- D5B2A6
≈ Sandpaper
- C1BD9C
≈ Fields Afar
Triada +120° +240°
- CEB79D
Teddy Bears & Cream
- 9BC5C2
≈ Pastel Turquoise
- C4B4D1
≈ Plumeria
Komplementarna rozszczepiona +150° +210°
- CEB79D
Teddy Bears & Cream
- 9DC2CF
≈ Stratosphere
- B5B9D8
≈ Lilac Flare
Tetrada +90° +180° +270°
- CEB79D
Teddy Bears & Cream
- A3C5B2
≈ Green Silk
- A7BED7
≈ Canopy Bed
- D0B1C4
≈ Tranquil Dusk
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.92:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.88:1 · APCA Lc 66
Najlepszy kolor tekstu: #000000
WCAG 10.88:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmenty kodu
CSS
:root {
--teddy-bears-cream: #ceb79d;
--teddy-bears-cream-rgb: 206 183 157;
--teddy-bears-cream-oklch: oklch(0.792 0.044 70.5);
}
.element {
color: var(--teddy-bears-cream);
background-color: hsl(32 33% 71%);
border-color: oklch(0.792 0.044 70.5);
}Tailwind CSS v4
@theme {
--color-teddy-bears-cream: #ceb79d;
--color-teddy-bears-cream-50: #fdf3e8;
--color-teddy-bears-cream-100: #f1e6d8;
--color-teddy-bears-cream-200: #e0d2c0;
--color-teddy-bears-cream-300: #c6b49f;
--color-teddy-bears-cream-400: #b09a82;
--color-teddy-bears-cream-500: #998266;
--color-teddy-bears-cream-600: #826e57;
--color-teddy-bears-cream-700: #685845;
--color-teddy-bears-cream-800: #4d4032;
--color-teddy-bears-cream-900: #352c22;
--color-teddy-bears-cream-950: #201911;
}SCSS
$teddy-bears-cream: #ceb79d;
$teddy-bears-cream-rgb: 206, 183, 157;
$teddy-bears-cream-light: mix(#fff, $teddy-bears-cream, 20%);
$teddy-bears-cream-dark: mix(#000, $teddy-bears-cream, 20%);
.element {
color: $teddy-bears-cream;
box-shadow: 0 0 0 2px rgba($teddy-bears-cream, 0.35);
}