Nazwany kolor · #579797
Peaceful Pond
Peaceful Pond to #579797: rgb(87 151 151), hsl(180 27% 47%), oklch(0.634 0.066 195.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Peaceful Pond color name →
#579797
oklch(0.634 0.066 195.6)
Konwersje koloru
- HEX
- #579797
- RGB
- rgb(87 151 151)
- HSL
- hsl(180 27% 47%)
- HWB
- hwb(180 34% 41%)
- OKLCH
- oklch(0.634 0.066 195.6)
- OKLab
- oklab(0.634 -0.063 -0.018)
- CIE Lab
- lab(58.21 -21.44 -6.8)
- LCH
- lch(58.21 22.49 197.6)
- CMYK
- cmyk(42% 0% 0% 41%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 69A1A1
- 7AABAB
- 8AB6B5
- 9BC0BF
- ABCACA
- BCD5D4
- CDDFDF
- DDEAE9
- EEF4F4
Odcienie ciemniejsze
- 4B8383
- 3E6F6F
- 335C5C
- 274949
- 1C3737
- 122626
- 081717
- 030808
- 000101
Tony
- 5C9595
- 629392
- 669090
- 6B8E8E
- 6F8C8B
- 728989
- 768787
- 7A8585
- 7D8282
Harmonie kolorów
Komplementarna +180°
- 579797
Peaceful Pond
- AF7A7D
≈ Taffeta Darling
Analogowa -30° +30°
- 579797
Peaceful Pond
- 639781
≈ Succulent Green
- 5D93A9
≈ Blue Persia
Triada +120° +240°
- 579797
Peaceful Pond
- 9A7EA6
≈ Lilac Intuition
- A2855D
≈ Timber Beam
Komplementarna rozszczepiona +150° +210°
- 579797
Peaceful Pond
- A87A93
≈ Cipher
- AD7E69
≈ Cuddlepot
Tetrada +90° +180° +270°
- 579797
Peaceful Pond
- 8685B1
≈ Aster Purple
- AF7A7D
≈ Taffeta Darling
- 8F8D5E
≈ Woodland Walk
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.34:1 · APCA Lc 61
Ag
AANa czerni
WCAG 6.27:1 · APCA Lc 41
Najlepszy kolor tekstu: #000000
WCAG 6.27:1 (AA) · APCA Lc 41
Contrast pairs
Fragmenty kodu
CSS
:root {
--peaceful-pond: #579797;
--peaceful-pond-rgb: 87 151 151;
--peaceful-pond-oklch: oklch(0.634 0.066 195.6);
}
.element {
color: var(--peaceful-pond);
background-color: hsl(180 27% 47%);
border-color: oklch(0.634 0.066 195.6);
}Tailwind CSS v4
@theme {
--color-peaceful-pond: #579797;
--color-peaceful-pond-50: #e0fbfc;
--color-peaceful-pond-100: #d0eff0;
--color-peaceful-pond-200: #b4ddde;
--color-peaceful-pond-300: #90c2c3;
--color-peaceful-pond-400: #6eabab;
--color-peaceful-pond-500: #4c9494;
--color-peaceful-pond-600: #417d7d;
--color-peaceful-pond-700: #346464;
--color-peaceful-pond-800: #244a49;
--color-peaceful-pond-900: #183332;
--color-peaceful-pond-950: #091f1e;
}SCSS
$peaceful-pond: #579797;
$peaceful-pond-rgb: 87, 151, 151;
$peaceful-pond-light: mix(#fff, $peaceful-pond, 20%);
$peaceful-pond-dark: mix(#000, $peaceful-pond, 20%);
.element {
color: $peaceful-pond;
box-shadow: 0 0 0 2px rgba($peaceful-pond, 0.35);
}