Nazwany kolor · #BABD29
Spring Forward
Spring Forward to #BABD29: rgb(186 189 41), hsl(61 64% 45%), oklch(0.771 0.158 110.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Spring Forward color name →
#BABD29
oklch(0.771 0.158 110.8)
Konwersje koloru
- HEX
- #babd29
- RGB
- rgb(186 189 41)
- HSL
- hsl(61 64% 45%)
- HWB
- hwb(61 16% 26%)
- OKLCH
- oklch(0.771 0.158 110.8)
- OKLab
- oklab(0.771 -0.056 0.148)
- CIE Lab
- lab(74.53 -13.25 67.35)
- LCH
- lch(74.53 68.64 101.1)
- CMYK
- cmyk(2% 0% 78% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C0C44B
- C7CB64
- CED27A
- D4D88F
- DBDFA2
- E2E5B5
- E9ECC8
- F0F2DA
- F8F9ED
Odcienie ciemniejsze
- A1A422
- 898C1C
- 727415
- 5C5D0F
- 464709
- 323305
- 1E1F02
- 0D0D01
- 020200
Tony
- B4B73C
- AEB149
- A8AB54
- A2A55D
- 9C9F65
- 96996B
- 909371
- 8B8D77
- 85867C
Harmonie kolorów
Komplementarna +180°
- BABD29
Spring Forward
- B5A6FF
≈ Shy Moment
Analogowa -30° +30°
- BABD29
Spring Forward
- E8A808
≈ Filthy Brown
- 78CD6A
≈ Energise
Triada +120° +240°
- BABD29
Spring Forward
- 30C4FF
≈ Shovel Knight
- FE87C1
≈ Cochonnet
Komplementarna rozszczepiona +150° +210°
- BABD29
Spring Forward
- 8AB5FF
≈ Carolina Blue
- E291F2
≈ Bright Lilac
Tetrada +90° +180° +270°
- BABD29
Spring Forward
- 00CDD7
≈ Jade Glass
- B5A6FF
≈ Shy Moment
- FF908F
≈ Cherished One
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.01:1 · APCA Lc 39
Ag
AAANa czerni
WCAG 10.39:1 · APCA Lc 63
Najlepszy kolor tekstu: #000000
WCAG 10.39:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmenty kodu
CSS
:root {
--spring-forward: #babd29;
--spring-forward-rgb: 186 189 41;
--spring-forward-oklch: oklch(0.771 0.158 110.8);
}
.element {
color: var(--spring-forward);
background-color: hsl(61 64% 45%);
border-color: oklch(0.771 0.158 110.8);
}Tailwind CSS v4
@theme {
--color-spring-forward: #babd29;
--color-spring-forward-50: #f5fbc7;
--color-spring-forward-100: #e8eeb1;
--color-spring-forward-200: #d4dc8c;
--color-spring-forward-300: #b8c05a;
--color-spring-forward-400: #a3a611;
--color-spring-forward-500: #8d8d00;
--color-spring-forward-600: #777800;
--color-spring-forward-700: #5f6000;
--color-spring-forward-800: #484500;
--color-spring-forward-900: #323000;
--color-spring-forward-950: #1e1c00;
}SCSS
$spring-forward: #babd29;
$spring-forward-rgb: 186, 189, 41;
$spring-forward-light: mix(#fff, $spring-forward, 20%);
$spring-forward-dark: mix(#000, $spring-forward, 20%);
.element {
color: $spring-forward;
box-shadow: 0 0 0 2px rgba($spring-forward, 0.35);
}