Named color · #C5D061
Sonic Lime
Sonic Lime is #C5D061: rgb(197 208 97), hsl(66 54% 60%), oklch(0.827 0.136 114.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Sonic Lime color name →
#C5D061
oklch(0.827 0.136 114.1)
Color conversions
- HEX
- #c5d061
- RGB
- rgb(197 208 97)
- HSL
- hsl(66 54% 60%)
- HWB
- hwb(66 38% 18%)
- OKLCH
- oklch(0.827 0.136 114.1)
- OKLab
- oklab(0.827 -0.056 0.124)
- CIE Lab
- lab(80.94 -15.22 52.75)
- LCH
- lch(80.94 54.9 106.1)
- CMYK
- cmyk(5% 0% 53% 18%)
Tints · Shades · Tones
Tints
- CAD574
- D0DA85
- D6DF95
- DBE3A5
- E1E8B4
- E7EDC4
- EDF1D3
- F3F6E1
- F9FBF0
Shades
- ABB553
- 929A46
- 798039
- 61672D
- 4B4F21
- 353915
- 21230B
- 0E1003
- 020200
Tones
- BEC867
- B7C06C
- AFB870
- A8B073
- A1A876
- 9BA079
- 94987B
- 8D907D
- 86887F
Color harmonies
Complementary +180°
- C5D061
Sonic Lime
- C9BAFF
≈ Lavender Tonic
Analogous -30° +30°
- C5D061
Sonic Lime
- F0BE52
≈ Adonis Rose Yellow
- 8DDD8D
≈ VIC 20 Green
Triadic +120° +240°
- C5D061
Sonic Lime
- 7FD2FF
≈ Drift on the Sea
- FFA8CB
≈ Majin Bū Pink
Split-complementary +150° +210°
- C5D061
Sonic Lime
- AAC6FF
≈ Night Snow
- F2A7F8
≈ Rich Brilliant Lavender
Tetradic +90° +180° +270°
- C5D061
Sonic Lime
- 25DFEF
≈ Cold Heights
- C9BAFF
≈ Lavender Tonic
- FFAEA8
≈ Apricot Blush
Contrast & accessibility
Ag
FailOn white
WCAG 1.67:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.56:1 · APCA Lc 73
Best text color: #000000
WCAG 12.56:1 (AAA) · APCA Lc 73
Contrast pairs
Code snippets
CSS
:root {
--sonic-lime: #c5d061;
--sonic-lime-rgb: 197 208 97;
--sonic-lime-oklch: oklch(0.827 0.136 114.1);
}
.element {
color: var(--sonic-lime);
background-color: hsl(66 54% 60%);
border-color: oklch(0.827 0.136 114.1);
}Tailwind CSS v4
@theme {
--color-sonic-lime: #c5d061;
--color-sonic-lime-50: #f2fbcf;
--color-sonic-lime-100: #e5eebb;
--color-sonic-lime-200: #d1dc99;
--color-sonic-lime-300: #b4c06d;
--color-sonic-lime-400: #9ea73d;
--color-sonic-lime-500: #868f00;
--color-sonic-lime-600: #717900;
--color-sonic-lime-700: #5b6100;
--color-sonic-lime-800: #444600;
--color-sonic-lime-900: #2f3100;
--color-sonic-lime-950: #1c1d00;
}SCSS
$sonic-lime: #c5d061;
$sonic-lime-rgb: 197, 208, 97;
$sonic-lime-light: mix(#fff, $sonic-lime, 20%);
$sonic-lime-dark: mix(#000, $sonic-lime, 20%);
.element {
color: $sonic-lime;
box-shadow: 0 0 0 2px rgba($sonic-lime, 0.35);
}