Color Conversion
#66ca5d
Variations
The purpose of this section is to accurately produce tints (pure white added) and shades (pure black added) of your selected color in 10% increments.
Pro Tip: Use shades for hover states and shadows, tints for highlights and backgrounds.
Shades
Darker variations created by adding black to your base color.
Tints
Lighter variations created by adding white to your base color.
Common Use Cases
- • UI component states (hover, active, disabled)
- • Creating depth with shadows and highlights
- • Building consistent color systems
Design System Tip
These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Complement
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Split-complementary
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Triadic
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Analogous
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
Monochromatic
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Tetradic
Two sets of complementary colors, separated by 60 degrees of hue.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
WCAG Standards
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.
Technical Formats
Practical Formats
Color Analysis
Blindness Simulator
Creative Aspects
Frequently asked questions
- What color is #66CA5D?
- #66CA5D is Springboard Lime – A bright, verdant green with a crisp yellow undertone that reads like sunlight through fresh leaves. It feels energetic and optimistic — a forward-pushing freshness that suggests growth and renewal.
- What does Springboard Lime symbolize?
- growth and renewal, eco-friendliness, youthful vitality, health and freshness, optimistic action. In Western contexts this bright green signals nature, newness and sustainability; in parts of the Islamic world green is sacred and associated with prosperity; in East Asia greens can connote youth and freshness, though specific tones carry different connotations (e.g., a green hat in China implies infidelity).
- Where is Springboard Lime used in design?
- In spaces and interfaces this green energizes attention and shortens decision time by feeling approachable and active. It encourages perceptions of health, freshness, and forward motion without the intensity of neon.
- Which colors go well with Springboard Lime?
- Springboard Lime pairs well with #CA5DAA, #A6CA5D, #5D66CA. #CA5DAA: Complementary contrast — the pink-magenta provides high chromatic pop for accent pairing and creates dynamic visual tension.. #A6CA5D: Analogous harmony — a warmer lime-yellow that creates a cohesive, sunlit gradient for packaging or UI backgrounds.. #5D66CA: Triadic balance — a cool periwinkle-blue provides energetic contrast while maintaining color balance across the palette..
- How does Springboard Lime affect mood?
- Bright confidence with lively optimism A quick uplift — viewers feel rejuvenated and ready to act. Key traits: renewal, vitality, approachability, eco-consciousness, clarity.
- Which industries use Springboard Lime?
- Springboard Lime is commonly used in Sustainable consumer goods, Health & wellness (natural supplements, fresh foods), Outdoor and active lifestyle brands. It fits brand archetypes like The Explorer, The Everyperson.
- What is the history of Springboard Lime?
- Bright yellow-leaning greens like Springboard Lime have roots in both natural dyes and later synthetic pigments. Early green hues came from plant extracts and copper-based verdigris; by the late 18th and 19th centuries brighter synthetic greens (Scheele's Green and Paris Green) appeared in textiles and wallpapers, though often proved toxic.
- How to use Springboard Lime in design?
- Maintain high contrast and limit coverage: use the color to attract attention, not to carry complex information. Best practices: Use as an accent (10–20% of palette) against deep neutral backgrounds (e.g., charcoal) to maximize contrast and brand recognition.; Pair with dark navy (#0F2A44 or similar) for accessible text-on-color CTAs and clear visual hierarchy.; Apply in micro-interactions (hover states, progress bars) to create perceivable motion and uplift without overwhelm..
- Is Springboard Lime accessible?
- Contrast ratio on white: 2.06:1, on black: 10.17:1. Passes WCAG AA for normal and large text.