Nazwany kolor · #D3DDD6
Periwinkle Tint
Periwinkle Tint to #D3DDD6: rgb(211 221 214), hsl(138 13% 85%), oklch(0.888 0.014 155.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Periwinkle Tint color name →
#D3DDD6
oklch(0.888 0.014 155.6)
Konwersje koloru
- HEX
- #d3ddd6
- RGB
- rgb(211 221 214)
- HSL
- hsl(138 13% 85%)
- HWB
- hwb(138 83% 13%)
- OKLCH
- oklch(0.888 0.014 155.6)
- OKLab
- oklab(0.888 -0.013 0.006)
- CIE Lab
- lab(87.19 -4.45 2.22)
- LCH
- lch(87.19 4.97 153.5)
- CMYK
- cmyk(5% 0% 3% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D7E0DA
- DCE4DE
- E0E7E2
- E4EBE6
- E9EEEA
- EDF1EE
- F2F5F3
- F6F8F7
- FBFCFB
Odcienie ciemniejsze
- B7C0BA
- 9CA49E
- 828884
- 696E6A
- 515552
- 3A3D3B
- 242625
- 101110
- 020202
Tony
- CAD3CD
- C2CAC4
- B9C0BB
- B1B7B3
- A9ADAA
- A0A4A1
- 989B99
- 909291
- 888988
Harmonie kolorów
Komplementarna +180°
- D3DDD6
Periwinkle Tint
- E0D7DE
≈ Little Lilac
Analogowa -30° +30°
- D3DDD6
Periwinkle Tint
- D8DCD2
≈ Wayward Willow
- D0DDDB
≈ Jade Dust
Triada +120° +240°
- D3DDD6
Periwinkle Tint
- D7D9E4
≈ So Blue-Berry
- E3D7D4
≈ Dreamy White
Komplementarna rozszczepiona +150° +210°
- D3DDD6
Periwinkle Tint
- DCD8E2
≈ Misty Lavender
- E3D6D9
≈ Lower Lilac
Tetrada +90° +180° +270°
- D3DDD6
Periwinkle Tint
- D3DBE3
≈ Skyscraper
- E0D7DE
≈ Little Lilac
- E1D8D0
≈ Taupe Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.39:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.08:1 · APCA Lc 84
Najlepszy kolor tekstu: #000000
WCAG 15.08:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--periwinkle-tint: #d3ddd6;
--periwinkle-tint-rgb: 211 221 214;
--periwinkle-tint-oklch: oklch(0.888 0.014 155.6);
}
.element {
color: var(--periwinkle-tint);
background-color: hsl(138 13% 85%);
border-color: oklch(0.888 0.014 155.6);
}Tailwind CSS v4
@theme {
--color-periwinkle-tint: #d3ddd6;
--color-periwinkle-tint-50: #f2f6f3;
--color-periwinkle-tint-100: #e4e9e6;
--color-periwinkle-tint-200: #cfd6d2;
--color-periwinkle-tint-300: #b2bab4;
--color-periwinkle-tint-400: #98a19b;
--color-periwinkle-tint-500: #7f8982;
--color-periwinkle-tint-600: #6c746e;
--color-periwinkle-tint-700: #565d58;
--color-periwinkle-tint-800: #3f4440;
--color-periwinkle-tint-900: #2b2f2c;
--color-periwinkle-tint-950: #191b19;
}SCSS
$periwinkle-tint: #d3ddd6;
$periwinkle-tint-rgb: 211, 221, 214;
$periwinkle-tint-light: mix(#fff, $periwinkle-tint, 20%);
$periwinkle-tint-dark: mix(#000, $periwinkle-tint, 20%);
.element {
color: $periwinkle-tint;
box-shadow: 0 0 0 2px rgba($periwinkle-tint, 0.35);
}