Nazwany kolor · #706842
Swinging Vine
Swinging Vine to #706842: rgb(112 104 66), hsl(50 26% 35%), oklch(0.515 0.056 97.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Swinging Vine color name →
#706842
oklch(0.515 0.056 97.7)
Konwersje koloru
- HEX
- #706842
- RGB
- rgb(112 104 66)
- HSL
- hsl(50 26% 35%)
- HWB
- hwb(50 26% 56%)
- OKLCH
- oklch(0.515 0.056 97.7)
- OKLab
- oklab(0.515 -0.008 0.055)
- CIE Lab
- lab(44.03 -1.22 22.61)
- LCH
- lch(44.03 22.64 93.1)
- CMYK
- cmyk(0% 7% 41% 56%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 7D7654
- 8B8466
- 999378
- A7A28A
- B5B19D
- C3C0B0
- D2CFC3
- E1DFD7
- F0EFEB
Odcienie ciemniejsze
- 605938
- 514B2F
- 433E25
- 35301C
- 272414
- 1A180B
- 0E0C05
- 040401
- 010000
Tony
- 726A49
- 736D4F
- 756F55
- 76725B
- 787462
- 797768
- 7B796E
- 7D7B74
- 7E7E7A
Harmonie kolorów
Komplementarna +180°
- 706842
Swinging Vine
- 5F6588
≈ Champion Blue
Analogowa -30° +30°
- 706842
Swinging Vine
- 7D6244
≈ Fall in Season
- 5E6E4B
≈ Pandanus
Triada +120° +240°
- 706842
Swinging Vine
- 40707D
≈ Grand Rapids
- 7D5B73
≈ Euphoric Magenta
Komplementarna rozszczepiona +150° +210°
- 706842
Swinging Vine
- 4E6B86
≈ Wedgewood
- 705F81
≈ Grape Compote
Tetrada +90° +180° +270°
- 706842
Swinging Vine
- 3F726D
≈ Jungle Noises
- 5F6588
≈ Champion Blue
- 845A61
≈ Rose Garland
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.60:1 · APCA Lc 78
Ag
FailNa czerni
WCAG 3.74:1 · APCA Lc 24
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.60:1 (AA) · APCA Lc 78
Contrast pairs
Fragmenty kodu
CSS
:root {
--swinging-vine: #706842;
--swinging-vine-rgb: 112 104 66;
--swinging-vine-oklch: oklch(0.515 0.056 97.7);
}
.element {
color: var(--swinging-vine);
background-color: hsl(50 26% 35%);
border-color: oklch(0.515 0.056 97.7);
}Tailwind CSS v4
@theme {
--color-swinging-vine: #706842;
--color-swinging-vine-50: #f9f6e4;
--color-swinging-vine-100: #ece9d4;
--color-swinging-vine-200: #d9d5ba;
--color-swinging-vine-300: #beb998;
--color-swinging-vine-400: #a79f79;
--color-swinging-vine-500: #90875b;
--color-swinging-vine-600: #7a724e;
--color-swinging-vine-700: #615b3e;
--color-swinging-vine-800: #48422c;
--color-swinging-vine-900: #322e1e;
--color-swinging-vine-950: #1e1b0e;
}SCSS
$swinging-vine: #706842;
$swinging-vine-rgb: 112, 104, 66;
$swinging-vine-light: mix(#fff, $swinging-vine, 20%);
$swinging-vine-dark: mix(#000, $swinging-vine, 20%);
.element {
color: $swinging-vine;
box-shadow: 0 0 0 2px rgba($swinging-vine, 0.35);
}