Adlandırılmış renk · #C6CCD4
Mega Metal Phoenix
Mega Metal Phoenix, #C6CCD4: rgb(198 204 212), hsl(214 14% 80%), oklch(0.843 0.013 255.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Mega Metal Phoenix color name →
#C6CCD4
oklch(0.843 0.013 255.5)
Renk dönüşümleri
- HEX
- #c6ccd4
- RGB
- rgb(198 204 212)
- HSL
- hsl(214 14% 80%)
- HWB
- hwb(214 78% 17%)
- OKLCH
- oklch(0.843 0.013 255.5)
- OKLab
- oklab(0.843 -0.003 -0.013)
- CIE Lab
- lab(81.75 -0.99 -4.74)
- LCH
- lch(81.75 4.84 258.2)
- CMYK
- cmyk(7% 4% 0% 17%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- CCD1D8
- D1D6DC
- D7DBE1
- DCE0E5
- E2E5E9
- E8EAEE
- EEEFF2
- F3F5F6
- F9FAFB
Koyu tonlar
- ACB1B8
- 92979D
- 7A7E83
- 626569
- 4B4E51
- 35373A
- 212224
- 0E0F10
- 020202
Gri tonlar
- BFC4CB
- B8BCC3
- B0B5BA
- A9ADB1
- A2A5A9
- 9B9EA1
- 949698
- 8E8F90
- 878788
Renk uyumları
Tamamlayıcı +180°
- C6CCD4
Mega Metal Phoenix
- D0CAC2
≈ Grey Pebble
Analog -30° +30°
- C6CCD4
Mega Metal Phoenix
- C3CDD2
≈ New North
- CACAD4
≈ Lilac Hint
Üçlü +120° +240°
- C6CCD4
Mega Metal Phoenix
- D4C8C9
≈ Dusty Lilac
- C8CDC5
≈ Silhouette
Bölünmüş tamamlayıcı +150° +210°
- C6CCD4
Mega Metal Phoenix
- D3C9C5
≈ Crushed Almond
- CCCCC3
≈ Paving Stones
Dörtlü +90° +180° +270°
- C6CCD4
Mega Metal Phoenix
- D2C8CD
≈ Dusty Lilac
- D0CAC2
≈ Grey Pebble
- C4CEC9
≈ Luna Light
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.61:1 · APCA Lc 28
Ag
AAASiyah üzerinde
WCAG 12.98:1 · APCA Lc 75
En iyi metin rengi: #000000
WCAG 12.98:1 (AAA) · APCA Lc 75
Contrast pairs
Kod parçacıkları
CSS
:root {
--mega-metal-phoenix: #c6ccd4;
--mega-metal-phoenix-rgb: 198 204 212;
--mega-metal-phoenix-oklch: oklch(0.843 0.013 255.5);
}
.element {
color: var(--mega-metal-phoenix);
background-color: hsl(214 14% 80%);
border-color: oklch(0.843 0.013 255.5);
}Tailwind CSS v4
@theme {
--color-mega-metal-phoenix: #c6ccd4;
--color-mega-metal-phoenix-50: #f3f5f9;
--color-mega-metal-phoenix-100: #e5e8ec;
--color-mega-metal-phoenix-200: #d1d4da;
--color-mega-metal-phoenix-300: #b3b8be;
--color-mega-metal-phoenix-400: #999fa6;
--color-mega-metal-phoenix-500: #81878f;
--color-mega-metal-phoenix-600: #6d7279;
--color-mega-metal-phoenix-700: #575b61;
--color-mega-metal-phoenix-800: #3f4347;
--color-mega-metal-phoenix-900: #2c2e31;
--color-mega-metal-phoenix-950: #191b1d;
}SCSS
$mega-metal-phoenix: #c6ccd4;
$mega-metal-phoenix-rgb: 198, 204, 212;
$mega-metal-phoenix-light: mix(#fff, $mega-metal-phoenix, 20%);
$mega-metal-phoenix-dark: mix(#000, $mega-metal-phoenix, 20%);
.element {
color: $mega-metal-phoenix;
box-shadow: 0 0 0 2px rgba($mega-metal-phoenix, 0.35);
}