Nazwany kolor · #7B9093
Weathered Pebble
Weathered Pebble to #7B9093: rgb(123 144 147), hsl(187 10% 53%), oklch(0.638 0.024 207). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Weathered Pebble color name →
#7B9093
oklch(0.638 0.024 207)
Konwersje koloru
- HEX
- #7b9093
- RGB
- rgb(123 144 147)
- HSL
- hsl(187 10% 53%)
- HWB
- hwb(187 48% 42%)
- OKLCH
- oklch(0.638 0.024 207)
- OKLab
- oklab(0.638 -0.022 -0.011)
- CIE Lab
- lab(58.2 -7.27 -4.25)
- LCH
- lch(58.2 8.42 210.3)
- CMYK
- cmyk(16% 2% 0% 42%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 889B9D
- 94A5A8
- A1B0B2
- AEBBBD
- BBC6C8
- C8D1D3
- D6DDDD
- E3E8E9
- F1F3F4
Odcienie ciemniejsze
- 6A7D7F
- 5A6A6C
- 4A5759
- 3A4547
- 2C3436
- 1E2425
- 101516
- 050708
- 010101
Tony
- 7C8E91
- 7C8D8F
- 7D8B8D
- 7D8A8B
- 7E8889
- 7E8688
- 7F8586
- 7F8384
- 808282
Harmonie kolorów
Komplementarna +180°
- 7B9093
Weathered Pebble
- 9A8684
≈ Rising Ash
Analogowa -30° +30°
- 7B9093
Weathered Pebble
- 7D918B
≈ Granny Smith
- 7E8E99
≈ Sidewalk Grey
Triada +120° +240°
- 7B9093
Weathered Pebble
- 948793
≈ Femme Fatale
- 928B7B
≈ Laurel Oak
Komplementarna rozszczepiona +150° +210°
- 7B9093
Weathered Pebble
- 99868C
≈ Orchard Plum
- 98887D
≈ Cantankerous Hippo
Tetrada +90° +180° +270°
- 7B9093
Weathered Pebble
- 8D8999
≈ Purple Ragwort
- 9A8684
≈ Rising Ash
- 8A8E7D
≈ Tea Leaf Mouse
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.35:1 · APCA Lc 61
Ag
AANa czerni
WCAG 6.25:1 · APCA Lc 41
Najlepszy kolor tekstu: #000000
WCAG 6.25:1 (AA) · APCA Lc 41
Contrast pairs
Fragmenty kodu
CSS
:root {
--weathered-pebble: #7b9093;
--weathered-pebble-rgb: 123 144 147;
--weathered-pebble-oklch: oklch(0.638 0.024 207);
}
.element {
color: var(--weathered-pebble);
background-color: hsl(187 10% 53%);
border-color: oklch(0.638 0.024 207);
}Tailwind CSS v4
@theme {
--color-weathered-pebble: #7b9093;
--color-weathered-pebble-50: #eef7f9;
--color-weathered-pebble-100: #dfeaec;
--color-weathered-pebble-200: #c9d7da;
--color-weathered-pebble-300: #aabbbe;
--color-weathered-pebble-400: #8fa3a6;
--color-weathered-pebble-500: #748b8e;
--color-weathered-pebble-600: #627678;
--color-weathered-pebble-700: #4f5e60;
--color-weathered-pebble-800: #394546;
--color-weathered-pebble-900: #273031;
--color-weathered-pebble-950: #151c1d;
}SCSS
$weathered-pebble: #7b9093;
$weathered-pebble-rgb: 123, 144, 147;
$weathered-pebble-light: mix(#fff, $weathered-pebble, 20%);
$weathered-pebble-dark: mix(#000, $weathered-pebble, 20%);
.element {
color: $weathered-pebble;
box-shadow: 0 0 0 2px rgba($weathered-pebble, 0.35);
}