Adlandırılmış renk · #9AB6C0
Peaceful Blue
Peaceful Blue, #9AB6C0: rgb(154 182 192), hsl(196 23% 68%), oklch(0.759 0.034 221.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Peaceful Blue color name →
#9AB6C0
oklch(0.759 0.034 221.4)
Renk dönüşümleri
- HEX
- #9ab6c0
- RGB
- rgb(154 182 192)
- HSL
- hsl(196 23% 68%)
- HWB
- hwb(196 60% 25%)
- OKLCH
- oklch(0.759 0.034 221.4)
- OKLab
- oklab(0.759 -0.025 -0.022)
- CIE Lab
- lab(72.17 -8.26 -8.46)
- LCH
- lch(72.17 11.83 225.7)
- CMYK
- cmyk(20% 5% 0% 25%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A4BDC6
- AEC4CC
- B8CCD3
- C2D3D9
- CCDADF
- D6E1E5
- E0E9EC
- EAF0F2
- F5F8F9
Koyu tonlar
- 859EA7
- 71868E
- 5E6F76
- 4B595F
- 394449
- 273034
- 171D20
- 090C0E
- 010202
Gri tonlar
- 97B0B9
- 95ABB3
- 92A6AC
- 90A0A6
- 8D9B9F
- 8B9599
- 889093
- 858B8C
- 838586
Renk uyumları
Tamamlayıcı +180°
- 9AB6C0
Peaceful Blue
- C4AAA0
≈ Prom Night
Analog -30° +30°
- 9AB6C0
Peaceful Blue
- 99B8B6
≈ Renew Blue
- A1B3C6
≈ Aerial View
Üçlü +120° +240°
- 9AB6C0
Peaceful Blue
- C0A9B7
≈ Soft Heather
- B5B299
≈ Alfalfa
Bölünmüş tamamlayıcı +150° +210°
- 9AB6C0
Peaceful Blue
- C5A8AB
≈ Dutchess Dawn
- BFAE9A
≈ Antler Velvet
Dörtlü +90° +180° +270°
- 9AB6C0
Peaceful Blue
- B8ABC1
≈ Lavender Frost
- C4AAA0
≈ Prom Night
- A9B59F
≈ Salvia
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.13:1 · APCA Lc 42
Ag
AAASiyah üzerinde
WCAG 9.82:1 · APCA Lc 60
En iyi metin rengi: #000000
WCAG 9.82:1 (AAA) · APCA Lc 60
Contrast pairs
Kod parçacıkları
CSS
:root {
--peaceful-blue: #9ab6c0;
--peaceful-blue-rgb: 154 182 192;
--peaceful-blue-oklch: oklch(0.759 0.034 221.4);
}
.element {
color: var(--peaceful-blue);
background-color: hsl(196 23% 68%);
border-color: oklch(0.759 0.034 221.4);
}Tailwind CSS v4
@theme {
--color-peaceful-blue: #9ab6c0;
--color-peaceful-blue-50: #ebf7fc;
--color-peaceful-blue-100: #dcebf0;
--color-peaceful-blue-200: #c6d8df;
--color-peaceful-blue-300: #a6bcc4;
--color-peaceful-blue-400: #89a3ad;
--color-peaceful-blue-500: #6e8c96;
--color-peaceful-blue-600: #5d767f;
--color-peaceful-blue-700: #4a5f66;
--color-peaceful-blue-800: #36454a;
--color-peaceful-blue-900: #253034;
--color-peaceful-blue-950: #131c1f;
}SCSS
$peaceful-blue: #9ab6c0;
$peaceful-blue-rgb: 154, 182, 192;
$peaceful-blue-light: mix(#fff, $peaceful-blue, 20%);
$peaceful-blue-dark: mix(#000, $peaceful-blue, 20%);
.element {
color: $peaceful-blue;
box-shadow: 0 0 0 2px rgba($peaceful-blue, 0.35);
}