Adlandırılmış renk · #7ACCB8
Bevelled Glass
Bevelled Glass, #7ACCB8: rgb(122 204 184), hsl(165 45% 64%), oklch(0.787 0.086 176.6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Bevelled Glass color name →
#7ACCB8
oklch(0.787 0.086 176.6)
Renk dönüşümleri
- HEX
- #7accb8
- RGB
- rgb(122 204 184)
- HSL
- hsl(165 45% 64%)
- HWB
- hwb(165 48% 20%)
- OKLCH
- oklch(0.787 0.086 176.6)
- OKLab
- oklab(0.787 -0.086 0.005)
- CIE Lab
- lab(76.39 -29.73 1.71)
- LCH
- lch(76.39 29.78 176.7)
- CMYK
- cmyk(40% 0% 10% 20%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 89D1BF
- 97D6C6
- A4DCCD
- B2E1D4
- BFE6DB
- CCEBE2
- D9F0E9
- E6F5F0
- F2FAF8
Koyu tonlar
- 69B1A0
- 599788
- 497E71
- 3A655B
- 2B4E45
- 1D3731
- 10221E
- 050F0C
- 010202
Gri tonlar
- 7CC4B2
- 7EBDAD
- 7FB5A7
- 80ADA1
- 81A69C
- 819E96
- 819690
- 818F8B
- 818785
Renk uyumları
Tamamlayıcı +180°
- 7ACCB8
Bevelled Glass
- E7A3BB
≈ Fussy Pink
Analog -30° +30°
- 7ACCB8
Bevelled Glass
- 95C999
≈ Frost Gum
- 72CAD5
≈ Beach Sparkle
Üçlü +120° +240°
- 7ACCB8
Bevelled Glass
- BFAFEB
≈ Purple Sand
- E5AC83
≈ Melting Sunset
Bölünmüş tamamlayıcı +150° +210°
- 7ACCB8
Bevelled Glass
- D7A7D7
≈ Favourite Lavender
- ECA59C
≈ Modestly Peach
Dörtlü +90° +180° +270°
- 7ACCB8
Bevelled Glass
- A0B9F2
≈ Truesky Gloxym
- E7A3BB
≈ Fussy Pink
- D2B678
≈ Dried Chamomile
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.88:1 · APCA Lc 36
Ag
AAASiyah üzerinde
WCAG 11.15:1 · APCA Lc 67
En iyi metin rengi: #000000
WCAG 11.15:1 (AAA) · APCA Lc 67
Contrast pairs
Kod parçacıkları
CSS
:root {
--bevelled-glass: #7accb8;
--bevelled-glass-rgb: 122 204 184;
--bevelled-glass-oklch: oklch(0.787 0.086 176.6);
}
.element {
color: var(--bevelled-glass);
background-color: hsl(165 45% 64%);
border-color: oklch(0.787 0.086 176.6);
}Tailwind CSS v4
@theme {
--color-bevelled-glass: #7accb8;
--color-bevelled-glass-50: #dcfef5;
--color-bevelled-glass-100: #caf2e8;
--color-bevelled-glass-200: #ade1d4;
--color-bevelled-glass-300: #86c6b8;
--color-bevelled-glass-400: #63af9d;
--color-bevelled-glass-500: #399985;
--color-bevelled-glass-600: #328170;
--color-bevelled-glass-700: #28675a;
--color-bevelled-glass-800: #1c4c40;
--color-bevelled-glass-900: #13352c;
--color-bevelled-glass-950: #042019;
}SCSS
$bevelled-glass: #7accb8;
$bevelled-glass-rgb: 122, 204, 184;
$bevelled-glass-light: mix(#fff, $bevelled-glass, 20%);
$bevelled-glass-dark: mix(#000, $bevelled-glass, 20%);
.element {
color: $bevelled-glass;
box-shadow: 0 0 0 2px rgba($bevelled-glass, 0.35);
}