Benannte Farbe · #B2A18C
Stepping Stones
Stepping Stones ist #B2A18C: rgb(178 161 140), hsl(33 20% 62%), oklch(0.718 0.036 73). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Stepping Stones color name →
#B2A18C
oklch(0.718 0.036 73)
Farbumrechnungen
- HEX
- #b2a18c
- RGB
- rgb(178 161 140)
- HSL
- hsl(33 20% 62%)
- HWB
- hwb(33 55% 30%)
- OKLCH
- oklch(0.718 0.036 73)
- OKLab
- oklab(0.718 0.01 0.034)
- CIE Lab
- lab(67.31 3.88 13.36)
- LCH
- lch(67.31 13.91 73.8)
- CMYK
- cmyk(0% 10% 21% 30%)
Tints · Shades · Tones
Tints
- BAAA97
- C1B3A2
- C9BCAD
- D0C6B9
- D8CFC4
- E0D9D0
- E7E2DB
- EFECE7
- F7F5F3
Shades
- 9A8B79
- 837667
- 6D6255
- 574E43
- 433C33
- 2F2A23
- 1D1914
- 0C0907
- 010101
Tones
- AD9E8B
- A89A8A
- A39789
- 9E9487
- 999086
- 948D85
- 8F8A84
- 8A8783
- 858381
Farbharmonien
Komplementär +180°
- B2A18C
Stepping Stones
- 95A6BA
≈ Moon Shadow
Analog -30° +30°
- B2A18C
Stepping Stones
- B89D93
≈ Big Horn Mountains
- A8A58C
≈ Herbes
Triadisch +120° +240°
- B2A18C
Stepping Stones
- 8BABAA
≈ Hydrology
- AC9EB4
≈ Grapeade
Geteilt komplementär +150° +210°
- B2A18C
Stepping Stones
- 8DA9B4
≈ Pewter Blue
- A0A2BA
≈ Blue Buzz
Tetradisch +90° +180° +270°
- B2A18C
Stepping Stones
- 91AB9E
≈ Rare Happening
- 95A6BA
≈ Moon Shadow
- B59CAA
≈ Play Time
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.50:1 · APCA Lc 49
Ag
AAAAuf Schwarz
WCAG 8.36:1 · APCA Lc 53
Beste Textfarbe: #000000
WCAG 8.36:1 (AAA) · APCA Lc 53
Contrast pairs
Code-Snippets
CSS
:root {
--stepping-stones: #b2a18c;
--stepping-stones-rgb: 178 161 140;
--stepping-stones-oklch: oklch(0.718 0.036 73);
}
.element {
color: var(--stepping-stones);
background-color: hsl(33 20% 62%);
border-color: oklch(0.718 0.036 73);
}Tailwind CSS v4
@theme {
--color-stepping-stones: #b2a18c;
--color-stepping-stones-50: #fbf4ea;
--color-stepping-stones-100: #efe6db;
--color-stepping-stones-200: #ddd2c4;
--color-stepping-stones-300: #c2b5a4;
--color-stepping-stones-400: #ac9c88;
--color-stepping-stones-500: #95836c;
--color-stepping-stones-600: #7e6f5c;
--color-stepping-stones-700: #655949;
--color-stepping-stones-800: #4a4035;
--color-stepping-stones-900: #342c24;
--color-stepping-stones-950: #1f1913;
}SCSS
$stepping-stones: #b2a18c;
$stepping-stones-rgb: 178, 161, 140;
$stepping-stones-light: mix(#fff, $stepping-stones, 20%);
$stepping-stones-dark: mix(#000, $stepping-stones, 20%);
.element {
color: $stepping-stones;
box-shadow: 0 0 0 2px rgba($stepping-stones, 0.35);
}