Benannte Farbe · #CFCAC1
Grey Pebble
Grey Pebble ist #CFCAC1: rgb(207 202 193), hsl(39 13% 78%), oklch(0.84 0.014 82.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Grey Pebble color name →
#CFCAC1
oklch(0.84 0.014 82.4)
Farbumrechnungen
- HEX
- #cfcac1
- RGB
- rgb(207 202 193)
- HSL
- hsl(39 13% 78%)
- HWB
- hwb(39 76% 19%)
- OKLCH
- oklch(0.84 0.014 82.4)
- OKLab
- oklab(0.84 0.002 0.013)
- CIE Lab
- lab(81.54 0.62 5.15)
- LCH
- lch(81.54 5.19 83.2)
- CMYK
- cmyk(0% 2% 7% 19%)
Tints · Shades · Tones
Tints
- D4CFC7
- D8D4CD
- DDDAD3
- E2DFD9
- E7E4E0
- ECEAE6
- F0EFEC
- F5F4F2
- FAFAF9
Shades
- B4AFA7
- 99958F
- 7F7C77
- 67645F
- 4F4D49
- 383734
- 232220
- 100F0E
- 020202
Tones
- C7C2BA
- BFBBB4
- B7B3AD
- AFACA6
- A7A4A0
- 9F9D99
- 979693
- 8F8E8D
- 888786
Farbharmonien
Komplementär +180°
- CFCAC1
Grey Pebble
- C6CBD4
≈ Mega Metal Phoenix
Analog -30° +30°
- CFCAC1
Grey Pebble
- D2C8C3
≈ Mud Berry
- CACCC2
≈ Chilean Sea Bass
Triadisch +120° +240°
- CFCAC1
Grey Pebble
- C1CDCE
≈ Tudor Ice
- CFC8D0
≈ Chrome Chalice
Geteilt komplementär +150° +210°
- CFCAC1
Grey Pebble
- C2CCD2
≈ Stone Golem
- CBC9D3
≈ Chrome Chalice
Tetradisch +90° +180° +270°
- CFCAC1
Grey Pebble
- C2CECA
≈ Luna Light
- C6CBD4
≈ Mega Metal Phoenix
- D2C7CB
≈ Odyssey Lilac
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.63:1 · APCA Lc 28
Ag
AAAAuf Schwarz
WCAG 12.87:1 · APCA Lc 75
Beste Textfarbe: #000000
WCAG 12.87:1 (AAA) · APCA Lc 75
Contrast pairs
Code-Snippets
CSS
:root {
--grey-pebble: #cfcac1;
--grey-pebble-rgb: 207 202 193;
--grey-pebble-oklch: oklch(0.84 0.014 82.4);
}
.element {
color: var(--grey-pebble);
background-color: hsl(39 13% 78%);
border-color: oklch(0.84 0.014 82.4);
}Tailwind CSS v4
@theme {
--color-grey-pebble: #cfcac1;
--color-grey-pebble-50: #f7f5f1;
--color-grey-pebble-100: #eae7e3;
--color-grey-pebble-200: #d7d4ce;
--color-grey-pebble-300: #bbb7b0;
--color-grey-pebble-400: #a29e96;
--color-grey-pebble-500: #8b857c;
--color-grey-pebble-600: #757169;
--color-grey-pebble-700: #5e5a54;
--color-grey-pebble-800: #45423d;
--color-grey-pebble-900: #302d2a;
--color-grey-pebble-950: #1c1a18;
}SCSS
$grey-pebble: #cfcac1;
$grey-pebble-rgb: 207, 202, 193;
$grey-pebble-light: mix(#fff, $grey-pebble, 20%);
$grey-pebble-dark: mix(#000, $grey-pebble, 20%);
.element {
color: $grey-pebble;
box-shadow: 0 0 0 2px rgba($grey-pebble, 0.35);
}