Nazwany kolor · #36574E
Balsam Branch
Balsam Branch to #36574E: rgb(54 87 78), hsl(164 23% 28%), oklch(0.428 0.042 175.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Balsam Branch color name →
#36574E
oklch(0.428 0.042 175.1)
Konwersje koloru
- HEX
- #36574e
- RGB
- rgb(54 87 78)
- HSL
- hsl(164 23% 28%)
- HWB
- hwb(164 21% 66%)
- OKLCH
- oklch(0.428 0.042 175.1)
- OKLab
- oklab(0.428 -0.042 0.004)
- CIE Lab
- lab(34.22 -14.36 1.22)
- LCH
- lch(34.22 14.41 175.1)
- CMYK
- cmyk(38% 0% 10% 66%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 49665E
- 5B766E
- 6F867F
- 829790
- 96A7A2
- AAB8B4
- BFCAC6
- D4DBD9
- E9EDEC
Odcienie ciemniejsze
- 2E4B43
- 253E38
- 1E332D
- 162723
- 0F1C19
- 08120F
- 030807
- 010302
- 000000
Tony
- 3E5B53
- 455F58
- 4D635D
- 546761
- 5B6B66
- 636F6B
- 6A7471
- 717876
- 797C7B
Harmonie kolorów
Komplementarna +180°
- 36574E
Balsam Branch
- 624650
≈ Gǔ Tóng Hēi Copper
Analogowa -30° +30°
- 36574E
Balsam Branch
- 415641
≈ Castellan Green
- 32565A
≈ Green Moonstone
Triada +120° +240°
- 36574E
Balsam Branch
- 514B64
≈ Legendary Purple
- 624939
≈ Ship Steering Wheel
Komplementarna rozszczepiona +150° +210°
- 36574E
Balsam Branch
- 5B485C
≈ Strike a Pose
- 644744
≈ Deep Mahogany
Tetrada +90° +180° +270°
- 36574E
Balsam Branch
- 444F67
≈ Evening Over the Ocean
- 624650
≈ Gǔ Tóng Hēi Copper
- 5A4E35
≈ Tǔ Hēi Black
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.98:1 · APCA Lc 88
Ag
FailNa czerni
WCAG 2.63:1 · APCA Lc 15
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.98:1 (AAA) · APCA Lc 88
Contrast pairs
Fragmenty kodu
CSS
:root {
--balsam-branch: #36574e;
--balsam-branch-rgb: 54 87 78;
--balsam-branch-oklch: oklch(0.428 0.042 175.1);
}
.element {
color: var(--balsam-branch);
background-color: hsl(164 23% 28%);
border-color: oklch(0.428 0.042 175.1);
}Tailwind CSS v4
@theme {
--color-balsam-branch: #36574e;
--color-balsam-branch-50: #e9f9f5;
--color-balsam-branch-100: #daede7;
--color-balsam-branch-200: #c3dad4;
--color-balsam-branch-300: #a2bfb7;
--color-balsam-branch-400: #85a79d;
--color-balsam-branch-500: #699085;
--color-balsam-branch-600: #597970;
--color-balsam-branch-700: #47615a;
--color-balsam-branch-800: #344741;
--color-balsam-branch-900: #23312d;
--color-balsam-branch-950: #121d1a;
}SCSS
$balsam-branch: #36574e;
$balsam-branch-rgb: 54, 87, 78;
$balsam-branch-light: mix(#fff, $balsam-branch, 20%);
$balsam-branch-dark: mix(#000, $balsam-branch, 20%);
.element {
color: $balsam-branch;
box-shadow: 0 0 0 2px rgba($balsam-branch, 0.35);
}