Nazwany kolor · #D8D0BC
Pebblebrook
Pebblebrook to #D8D0BC: rgb(216 208 188), hsl(43 26% 79%), oklch(0.859 0.028 88.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Pebblebrook color name →
#D8D0BC
oklch(0.859 0.028 88.8)
Konwersje koloru
- HEX
- #d8d0bc
- RGB
- rgb(216 208 188)
- HSL
- hsl(43 26% 79%)
- HWB
- hwb(43 74% 15%)
- OKLCH
- oklch(0.859 0.028 88.8)
- OKLab
- oklab(0.859 0.001 0.028)
- CIE Lab
- lab(83.73 0.37 11.01)
- LCH
- lch(83.73 11.02 88.1)
- CMYK
- cmyk(0% 4% 13% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DCD5C3
- E0D9C9
- E4DED0
- E7E3D7
- EBE7DD
- EFECE4
- F3F1EB
- F7F5F1
- FBFAF8
Odcienie ciemniejsze
- BCB5A3
- A09A8B
- 858073
- 6B675D
- 534F47
- 3B3932
- 25231F
- 11100D
- 020202
Tony
- CFC8B6
- C6BFB0
- BDB7AA
- B4AFA4
- ABA79E
- A29F98
- 9A9792
- 918F8C
- 888886
Harmonie kolorów
Komplementarna +180°
- D8D0BC
Pebblebrook
- C9D0E4
≈ Love Crystal
Analogowa -30° +30°
- D8D0BC
Pebblebrook
- DFCDBF
≈ Cocoa Parfait
- CED3BF
≈ Merry Music
Triada +120° +240°
- D8D0BC
Pebblebrook
- BCD6DA
≈ Light Sky Chase
- DCCADA
≈ Creamy Mauve
Komplementarna rozszczepiona +150° +210°
- D8D0BC
Pebblebrook
- C0D4E1
≈ Two Harbours
- D3CDE1
≈ Potentially Purple
Tetrada +90° +180° +270°
- D8D0BC
Pebblebrook
- BED7D1
≈ Aquatic Edge
- C9D0E4
≈ Love Crystal
- E1C9D0
≈ Sweet and Sassy
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.53:1 · APCA Lc 25
Ag
AAANa czerni
WCAG 13.66:1 · APCA Lc 78
Najlepszy kolor tekstu: #000000
WCAG 13.66:1 (AAA) · APCA Lc 78
Contrast pairs
Fragmenty kodu
CSS
:root {
--pebblebrook: #d8d0bc;
--pebblebrook-rgb: 216 208 188;
--pebblebrook-oklch: oklch(0.859 0.028 88.8);
}
.element {
color: var(--pebblebrook);
background-color: hsl(43 26% 79%);
border-color: oklch(0.859 0.028 88.8);
}Tailwind CSS v4
@theme {
--color-pebblebrook: #d8d0bc;
--color-pebblebrook-50: #f8f5ec;
--color-pebblebrook-100: #ebe8dd;
--color-pebblebrook-200: #d9d4c7;
--color-pebblebrook-300: #bdb7a7;
--color-pebblebrook-400: #a59e8c;
--color-pebblebrook-500: #8e8671;
--color-pebblebrook-600: #787160;
--color-pebblebrook-700: #605a4d;
--color-pebblebrook-800: #474237;
--color-pebblebrook-900: #312d26;
--color-pebblebrook-950: #1d1a14;
}SCSS
$pebblebrook: #d8d0bc;
$pebblebrook-rgb: 216, 208, 188;
$pebblebrook-light: mix(#fff, $pebblebrook, 20%);
$pebblebrook-dark: mix(#000, $pebblebrook, 20%);
.element {
color: $pebblebrook;
box-shadow: 0 0 0 2px rgba($pebblebrook, 0.35);
}