Nazwany kolor · #7C9AA0
Tranquil Aqua
Tranquil Aqua to #7C9AA0: rgb(124 154 160), hsl(190 16% 56%), oklch(0.665 0.035 211.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Tranquil Aqua color name →
#7C9AA0
oklch(0.665 0.035 211.2)
Konwersje koloru
- HEX
- #7c9aa0
- RGB
- rgb(124 154 160)
- HSL
- hsl(190 16% 56%)
- HWB
- hwb(190 49% 37%)
- OKLCH
- oklch(0.665 0.035 211.2)
- OKLab
- oklab(0.665 -0.03 -0.018)
- CIE Lab
- lab(61.46 -9.79 -6.8)
- LCH
- lch(61.46 11.92 214.8)
- CMYK
- cmyk(22% 4% 0% 37%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 89A4A9
- 95AEB2
- A2B7BC
- AFC1C5
- BCCBCF
- C9D6D8
- D7E0E2
- E4EAEB
- F1F5F5
Odcienie ciemniejsze
- 6B858B
- 5A7176
- 4A5E61
- 3B4B4E
- 2C393B
- 1E2729
- 111719
- 050909
- 010101
Tony
- 7D979D
- 7D959A
- 7E9296
- 7E9093
- 7F8D90
- 7F8A8D
- 7F888A
- 808586
- 808383
Harmonie kolorów
Komplementarna +180°
- 7C9AA0
Tranquil Aqua
- A88D87
≈ Ash Hollow
Analogowa -30° +30°
- 7C9AA0
Tranquil Aqua
- 7D9B95
≈ Avalon
- 8297A8
≈ Ashley Blue
Triada +120° +240°
- 7C9AA0
Tranquil Aqua
- A18C9E
≈ Vesuvian Violet
- 9C947C
≈ Shortgrass Prairie
Komplementarna rozszczepiona +150° +210°
- 7C9AA0
Tranquil Aqua
- A78B92
≈ Gothic Amethyst
- A48F7F
≈ Zinc Blend
Tetrada +90° +180° +270°
- 7C9AA0
Tranquil Aqua
- 978FA6
≈ Alienator Grey
- A88D87
≈ Ash Hollow
- 909780
≈ Veranda Green
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.00:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.98:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.98:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--tranquil-aqua: #7c9aa0;
--tranquil-aqua-rgb: 124 154 160;
--tranquil-aqua-oklch: oklch(0.665 0.035 211.2);
}
.element {
color: var(--tranquil-aqua);
background-color: hsl(190 16% 56%);
border-color: oklch(0.665 0.035 211.2);
}Tailwind CSS v4
@theme {
--color-tranquil-aqua: #7c9aa0;
--color-tranquil-aqua-50: #ebf8fb;
--color-tranquil-aqua-100: #dcebef;
--color-tranquil-aqua-200: #c4d8dd;
--color-tranquil-aqua-300: #a4bcc2;
--color-tranquil-aqua-400: #88a4aa;
--color-tranquil-aqua-500: #6c8d93;
--color-tranquil-aqua-600: #5c777d;
--color-tranquil-aqua-700: #495f64;
--color-tranquil-aqua-800: #354649;
--color-tranquil-aqua-900: #243032;
--color-tranquil-aqua-950: #131d1e;
}SCSS
$tranquil-aqua: #7c9aa0;
$tranquil-aqua-rgb: 124, 154, 160;
$tranquil-aqua-light: mix(#fff, $tranquil-aqua, 20%);
$tranquil-aqua-dark: mix(#000, $tranquil-aqua, 20%);
.element {
color: $tranquil-aqua;
box-shadow: 0 0 0 2px rgba($tranquil-aqua, 0.35);
}