Nazwany kolor · #7DD4D6
Aruba Blue
Aruba Blue to #7DD4D6: rgb(125 212 214), hsl(181 52% 66%), oklch(0.816 0.084 197.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Aruba Blue color name →
#7DD4D6
oklch(0.816 0.084 197.5)
Konwersje koloru
- HEX
- #7dd4d6
- RGB
- rgb(125 212 214)
- HSL
- hsl(181 52% 66%)
- HWB
- hwb(181 49% 16%)
- OKLCH
- oklch(0.816 0.084 197.5)
- OKLab
- oklab(0.816 -0.08 -0.025)
- CIE Lab
- lab(79.52 -27.03 -9.69)
- LCH
- lch(79.52 28.71 199.7)
- CMYK
- cmyk(42% 1% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 8CD8DA
- 9ADDDE
- A7E1E2
- B4E6E6
- C1EAEA
- CEEEEF
- DAF2F3
- E7F7F7
- F3FBFB
Odcienie ciemniejsze
- 6CB8BA
- 5B9D9E
- 4B8384
- 3B696A
- 2C5152
- 1E3A3B
- 112425
- 051010
- 010202
Tony
- 7FCBCD
- 80C3C4
- 81BABB
- 82B2B3
- 83A9AA
- 83A1A1
- 829999
- 829091
- 818888
Harmonie kolorów
Komplementarna +180°
- 7DD4D6
Aruba Blue
- F5ADAF
≈ Brain Pink
Analogowa -30° +30°
- 7DD4D6
Aruba Blue
- 8CD5B8
≈ Cabbage
- 87CEEE
≈ Below Zero
Triada +120° +240°
- 7DD4D6
Aruba Blue
- DAB2E7
≈ Pretty Petunia
- E1BC84
≈ Bag of Gold
Komplementarna rozszczepiona +150° +210°
- 7DD4D6
Aruba Blue
- ECADCD
≈ Coral Corn Snake
- F1B394
≈ Apricot Spring
Tetrada +90° +180° +270°
- 7DD4D6
Aruba Blue
- BFBBF7
≈ Dried Lilac
- F5ADAF
≈ Brain Pink
- C8C787
≈ Tyrant Skull
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.71:1 · APCA Lc 31
Ag
AAANa czerni
WCAG 12.26:1 · APCA Lc 72
Najlepszy kolor tekstu: #000000
WCAG 12.26:1 (AAA) · APCA Lc 72
Contrast pairs
Fragmenty kodu
CSS
:root {
--aruba-blue: #7dd4d6;
--aruba-blue-rgb: 125 212 214;
--aruba-blue-oklch: oklch(0.816 0.084 197.5);
}
.element {
color: var(--aruba-blue);
background-color: hsl(181 52% 66%);
border-color: oklch(0.816 0.084 197.5);
}Tailwind CSS v4
@theme {
--color-aruba-blue: #7dd4d6;
--color-aruba-blue-50: #dafdfe;
--color-aruba-blue-100: #c8f1f3;
--color-aruba-blue-200: #aae0e2;
--color-aruba-blue-300: #83c5c8;
--color-aruba-blue-400: #5caeb0;
--color-aruba-blue-500: #2e979a;
--color-aruba-blue-600: #2a8082;
--color-aruba-blue-700: #216668;
--color-aruba-blue-800: #164b4c;
--color-aruba-blue-900: #0e3434;
--color-aruba-blue-950: #022020;
}SCSS
$aruba-blue: #7dd4d6;
$aruba-blue-rgb: 125, 212, 214;
$aruba-blue-light: mix(#fff, $aruba-blue, 20%);
$aruba-blue-dark: mix(#000, $aruba-blue, 20%);
.element {
color: $aruba-blue;
box-shadow: 0 0 0 2px rgba($aruba-blue, 0.35);
}