Nazwany kolor · #AFB2A7
Pebble Walk
Pebble Walk to #AFB2A7: rgb(175 178 167), hsl(76 7% 68%), oklch(0.758 0.016 119.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Pebble Walk color name →
#AFB2A7
oklch(0.758 0.016 119.2)
Konwersje koloru
- HEX
- #afb2a7
- RGB
- rgb(175 178 167)
- HSL
- hsl(76 7% 68%)
- HWB
- hwb(76 65% 30%)
- OKLCH
- oklch(0.758 0.016 119.2)
- OKLab
- oklab(0.758 -0.008 0.014)
- CIE Lab
- lab(72.09 -2.6 5.26)
- LCH
- lch(72.09 5.87 116.4)
- CMYK
- cmyk(2% 0% 6% 30%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B7B9AF
- BFC1B8
- C6C9C1
- CED0C9
- D6D8D2
- DEE0DB
- E6E7E4
- EFEFED
- F7F7F6
Odcienie ciemniejsze
- 989A91
- 81837B
- 6B6D66
- 565752
- 41433E
- 2E2F2C
- 1C1D1A
- 0B0C0A
- 010101
Tony
- AAADA3
- A5A89F
- A1A39B
- 9C9E97
- 979993
- 92948F
- 8E8F8C
- 898A88
- 858584
Harmonie kolorów
Komplementarna +180°
- AFB2A7
Pebble Walk
- B2AEB9
≈ Canyon Cloud
Analogowa -30° +30°
- AFB2A7
Pebble Walk
- B4B0A5
≈ Light Sage
- AAB3AB
≈ Southern Pine
Triada +120° +240°
- AFB2A7
Pebble Walk
- A8B2BA
≈ Shaved Ice
- BAACB0
≈ Heather Bay
Komplementarna rozszczepiona +150° +210°
- AFB2A7
Pebble Walk
- ACB0BB
≈ Pantomime
- B6ADB5
≈ Lost Lake
Tetrada +90° +180° +270°
- AFB2A7
Pebble Walk
- A6B3B6
≈ Winter Morning Mist
- B2AEB9
≈ Canyon Cloud
- BAADAB
≈ Vintage Mauve
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.15:1 · APCA Lc 42
Ag
AAANa czerni
WCAG 9.74:1 · APCA Lc 60
Najlepszy kolor tekstu: #000000
WCAG 9.74:1 (AAA) · APCA Lc 60
Contrast pairs
Fragmenty kodu
CSS
:root {
--pebble-walk: #afb2a7;
--pebble-walk-rgb: 175 178 167;
--pebble-walk-oklch: oklch(0.758 0.016 119.2);
}
.element {
color: var(--pebble-walk);
background-color: hsl(76 7% 68%);
border-color: oklch(0.758 0.016 119.2);
}Tailwind CSS v4
@theme {
--color-pebble-walk: #afb2a7;
--color-pebble-walk-50: #f4f6f1;
--color-pebble-walk-100: #e7e9e3;
--color-pebble-walk-200: #d3d5ce;
--color-pebble-walk-300: #b6b9b0;
--color-pebble-walk-400: #9da096;
--color-pebble-walk-500: #85887c;
--color-pebble-walk-600: #707369;
--color-pebble-walk-700: #5a5c54;
--color-pebble-walk-800: #42433d;
--color-pebble-walk-900: #2d2e2a;
--color-pebble-walk-950: #1a1b18;
}SCSS
$pebble-walk: #afb2a7;
$pebble-walk-rgb: 175, 178, 167;
$pebble-walk-light: mix(#fff, $pebble-walk, 20%);
$pebble-walk-dark: mix(#000, $pebble-walk, 20%);
.element {
color: $pebble-walk;
box-shadow: 0 0 0 2px rgba($pebble-walk, 0.35);
}