Najbliższy nazwany kolor · #347A46
#347A46
Najbliższy nazwany kolor: Cucumber Queen
#347A46 (rgb(52 122 70), hsl(135 40% 34%), oklch(0.521 0.108 149.6)) jest najbliższy nazwanemu kolorowi Cucumber Queen. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#347A46
oklch(0.521 0.108 149.6)
Konwersje koloru
- HEX
- #347a46
- RGB
- rgb(52 122 70)
- HSL
- hsl(135 40% 34%)
- HWB
- hwb(135 20% 52%)
- OKLCH
- oklch(0.521 0.108 149.6)
- OKLab
- oklab(0.521 -0.093 0.054)
- CIE Lab
- lab(45.75 -32.3 21.58)
- LCH
- lch(45.75 38.84 146.3)
- CMYK
- cmyk(57% 0% 43% 52%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 4A8757
- 5E9469
- 72A17B
- 86AE8D
- 9ABB9F
- AEC9B2
- C2D6C5
- D6E4D8
- EAF1EB
Odcienie ciemniejsze
- 2C693C
- 245932
- 1C4928
- 153A1E
- 0E2B15
- 071D0D
- 031005
- 010502
- 000100
Tony
- 3E7B4C
- 477C52
- 4F7C58
- 577D5E
- 5E7E64
- 657E69
- 6C7F6F
- 737F75
- 7A807A
Harmonie kolorów
Komplementarna +180°
- 347A46
Cucumber Queen
- 8B5187
≈ Razzmic Berry
Analogowa -30° +30°
- 347A46
Cucumber Queen
- 62721E
≈ Fern Frond
- 007B6B
≈ Mediaeval Forest
Triada +120° +240°
- 347A46
Cucumber Queen
- 5165A7
≈ Submarine Base
- 9E4E43
≈ Boynton Canyon
Komplementarna rozszczepiona +150° +210°
- 347A46
Cucumber Queen
- 73599E
≈ Sumire Violet
- 9A4C67
≈ Baby Berries
Tetrada +90° +180° +270°
- 347A46
Cucumber Queen
- 1B70A0
≈ Quarterdeck
- 8B5187
≈ Razzmic Berry
- 96581D
≈ Sepia Wash
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.22:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 4.01:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.22:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--cucumber-queen: #347a46;
--cucumber-queen-rgb: 52 122 70;
--cucumber-queen-oklch: oklch(0.521 0.108 149.6);
}
.element {
color: var(--cucumber-queen);
background-color: hsl(135 40% 34%);
border-color: oklch(0.521 0.108 149.6);
}Tailwind CSS v4
@theme {
--color-cucumber-queen: #347a46;
--color-cucumber-queen-50: #e0ffe6;
--color-cucumber-queen-100: #cef3d6;
--color-cucumber-queen-200: #b3e2be;
--color-cucumber-queen-300: #8ec89c;
--color-cucumber-queen-400: #6eb07c;
--color-cucumber-queen-500: #4b9a5e;
--color-cucumber-queen-600: #418250;
--color-cucumber-queen-700: #346840;
--color-cucumber-queen-800: #264c2c;
--color-cucumber-queen-900: #19351e;
--color-cucumber-queen-950: #0a200e;
}SCSS
$cucumber-queen: #347a46;
$cucumber-queen-rgb: 52, 122, 70;
$cucumber-queen-light: mix(#fff, $cucumber-queen, 20%);
$cucumber-queen-dark: mix(#000, $cucumber-queen, 20%);
.element {
color: $cucumber-queen;
box-shadow: 0 0 0 2px rgba($cucumber-queen, 0.35);
}