Adlandırılmış renk · #93C5B6
Float Your Boat
Float Your Boat, #93C5B6: rgb(147 197 182), hsl(162 30% 67%), oklch(0.784 0.057 174.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Float Your Boat color name →
#93C5B6
oklch(0.784 0.057 174.3)
Renk dönüşümleri
- HEX
- #93c5b6
- RGB
- rgb(147 197 182)
- HSL
- hsl(162 30% 67%)
- HWB
- hwb(162 58% 23%)
- OKLCH
- oklch(0.784 0.057 174.3)
- OKLab
- oklab(0.784 -0.056 0.006)
- CIE Lab
- lab(75.67 -19.4 1.95)
- LCH
- lch(75.67 19.5 174.3)
- CMYK
- cmyk(25% 0% 8% 23%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 9ECBBD
- A9D1C4
- B4D6CB
- BEDCD3
- C9E2DA
- D4E8E1
- DFEDE9
- E9F3F0
- F4F9F8
Koyu tonlar
- 7FAB9E
- 6C9286
- 59796F
- 476159
- 364B44
- 253530
- 16211D
- 080E0C
- 010202
Gri tonlar
- 92BEB0
- 90B7AB
- 8EB0A5
- 8CA9A0
- 8BA29B
- 899B95
- 879490
- 848D8B
- 828785
Renk uyumları
Tamamlayıcı +180°
- 93C5B6
Float Your Boat
- D7AABB
≈ Pink Nectar
Analog -30° +30°
- 93C5B6
Float Your Boat
- A3C3A2
≈ Aroma Garden
- 8EC4C9
≈ Cerulean Skies
Üçlü +120° +240°
- 93C5B6
Float Your Boat
- BAB2DA
≈ Moonraker
- D6B097
≈ Cinnamon Mocha
Bölünmüş tamamlayıcı +150° +210°
- 93C5B6
Float Your Boat
- CBADCD
≈ Windsor Purple
- DBABA7
≈ Peach Poppy
Dörtlü +90° +180° +270°
- 93C5B6
Float Your Boat
- A7B9DE
≈ Lavender Phlox
- D7AABB
≈ Pink Nectar
- CAB690
≈ Warm and Toasty
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.92:1 · APCA Lc 37
Ag
AAASiyah üzerinde
WCAG 10.90:1 · APCA Lc 66
En iyi metin rengi: #000000
WCAG 10.90:1 (AAA) · APCA Lc 66
Contrast pairs
Kod parçacıkları
CSS
:root {
--float-your-boat: #93c5b6;
--float-your-boat-rgb: 147 197 182;
--float-your-boat-oklch: oklch(0.784 0.057 174.3);
}
.element {
color: var(--float-your-boat);
background-color: hsl(162 30% 67%);
border-color: oklch(0.784 0.057 174.3);
}Tailwind CSS v4
@theme {
--color-float-your-boat: #93c5b6;
--color-float-your-boat-50: #e5fbf4;
--color-float-your-boat-100: #d5eee7;
--color-float-your-boat-200: #bcddd3;
--color-float-your-boat-300: #9ac1b6;
--color-float-your-boat-400: #7baa9c;
--color-float-your-boat-500: #5d9383;
--color-float-your-boat-600: #4f7c6f;
--color-float-your-boat-700: #3f6359;
--color-float-your-boat-800: #2d4940;
--color-float-your-boat-900: #1f332c;
--color-float-your-boat-950: #0e1e19;
}SCSS
$float-your-boat: #93c5b6;
$float-your-boat-rgb: 147, 197, 182;
$float-your-boat-light: mix(#fff, $float-your-boat, 20%);
$float-your-boat-dark: mix(#000, $float-your-boat, 20%);
.element {
color: $float-your-boat;
box-shadow: 0 0 0 2px rgba($float-your-boat, 0.35);
}