Cor nomeada · #B3BB6B
Spring Ahead
Spring Ahead é #B3BB6B: rgb(179 187 107), hsl(66 37% 58%), oklch(0.768 0.104 113.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Spring Ahead color name →
#B3BB6B
oklch(0.768 0.104 113.5)
Conversões de cor
- HEX
- #b3bb6b
- RGB
- rgb(179 187 107)
- HSL
- hsl(66 37% 58%)
- HWB
- hwb(66 42% 27%)
- OKLCH
- oklch(0.768 0.104 113.5)
- OKLab
- oklab(0.768 -0.042 0.095)
- CIE Lab
- lab(73.9 -11.82 39.35)
- LCH
- lch(73.9 41.09 106.7)
- CMYK
- cmyk(4% 0% 43% 27%)
Tons claros · Sombras · Tons
Tons claros
- BAC27B
- C2C98A
- C9CF99
- D0D6A8
- D8DDB6
- E0E4C5
- E7EBD3
- EFF1E2
- F7F8F0
Sombras
- 9BA25C
- 848A4E
- 6E733F
- 585C32
- 434625
- 2F3218
- 1D1F0D
- 0C0D04
- 010200
Tons
- AEB56E
- A8AF71
- A3A974
- 9EA376
- 999D79
- 94987A
- 8F927C
- 8A8C7E
- 85867F
Harmonias de cor
Complementar +180°
- B3BB6B
Spring Ahead
- B6A7F0
≈ Winterspring Lilac
Análoga -30° +30°
- B3BB6B
Spring Ahead
- D3AE62
≈ Sell Gold
- 8BC588
≈ Jolt of Green
Tríade +120° +240°
- B3BB6B
Spring Ahead
- 6ABFEB
≈ Norfolk Sky
- E898B9
≈ Shocking
Complementar dividida +150° +210°
- B3BB6B
Spring Ahead
- 91B3F6
≈ Fly Away
- D49DDA
≈ Velvet Horizon
Tétrade +90° +180° +270°
- B3BB6B
Spring Ahead
- 53C7D1
≈ Sea Serpent
- B6A7F0
≈ Winterspring Lilac
- EF9994
≈ Coral Bead
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.05:1 · APCA Lc 40
Ag
AAASobre preto
WCAG 10.23:1 · APCA Lc 62
Melhor cor de texto: #000000
WCAG 10.23:1 (AAA) · APCA Lc 62
Contrast pairs
Trechos de código
CSS
:root {
--spring-ahead: #b3bb6b;
--spring-ahead-rgb: 179 187 107;
--spring-ahead-oklch: oklch(0.768 0.104 113.5);
}
.element {
color: var(--spring-ahead);
background-color: hsl(66 37% 58%);
border-color: oklch(0.768 0.104 113.5);
}Tailwind CSS v4
@theme {
--color-spring-ahead: #b3bb6b;
--color-spring-ahead-50: #f3f9d8;
--color-spring-ahead-100: #e6edc6;
--color-spring-ahead-200: #d2daa8;
--color-spring-ahead-300: #b5be80;
--color-spring-ahead-400: #9ea55a;
--color-spring-ahead-500: #868d32;
--color-spring-ahead-600: #71782c;
--color-spring-ahead-700: #5b6023;
--color-spring-ahead-800: #444616;
--color-spring-ahead-900: #2f300e;
--color-spring-ahead-950: #1b1c02;
}SCSS
$spring-ahead: #b3bb6b;
$spring-ahead-rgb: 179, 187, 107;
$spring-ahead-light: mix(#fff, $spring-ahead, 20%);
$spring-ahead-dark: mix(#000, $spring-ahead, 20%);
.element {
color: $spring-ahead;
box-shadow: 0 0 0 2px rgba($spring-ahead, 0.35);
}