Why Colors Matter
What are colors used for? Colors are everywhere—in your designs, on your website, in your marketing materials, on social media, and even in your products. They create mood, direct attention, and help highlight important information. Colors are your tool to evoke emotions: Aqua for innovation and freshness, Navy for trust and professionalism, Fuchsia for energy and creativity. Every color has its impact and can be strategically used to trigger the desired reaction in your target audience.
Why are they so important? Colors communicate on a deep, emotional level—often faster than words. They influence how people perceive your brand and what feelings they associate with it. A consistent color palette makes your brand recognizable and creates a visual identity that stays in memory. Studies show that colors account for up to 80% of brand recognition. Without a thoughtful color strategy, you appear chaotic and unprofessional.
What can you achieve with them? With the right color palette, you create an emotional connection with your target audience and increase your brand awareness. Colors can build trust, capture attention, and even trigger actions. A professional color palette makes your designs consistent, appealing, and unforgettable. It helps you stand out from the competition and create a strong, memorable identity that people will love.
Selection Colors
Primary brand colors used for selection and accent elements.
Aqua
#00FFDCrgb(0, 255, 220)C:100 M:0 Y:14 K:0Bright turquoise/aqua selection color
Navy
#1E2A45rgb(30, 42, 69)C:100 M:60 Y:0 K:73Dark blue/navy selection color
Fuchsia
#FF008Frgb(255, 0, 143)C:0 M:100 Y:44 K:0Vibrant pink/fuchsia selection color
Color Shades
Color shades provide additional variations of the selection colors for improved contrast and visual hierarchy.
Note: These color shades were generated using the Adobe Color Wheel to ensure professional color harmony.
Aqua Shades
Tailwind numbering: 50 (lightest) to 700 (darkest)
Aqua 50
#E6FFFCrgb(230, 255, 252)Very light aqua for subtle backgrounds
Aqua 100
#B3FFF5rgb(179, 255, 245)Light aqua for backgrounds
Aqua 500 (Base)
#00FFDCrgb(0, 255, 220)C:100 M:0 Y:14 K:0Base aqua color
Aqua 600
#00BFA5rgb(0, 191, 165)C:100 M:0 Y:14 K:25Medium aqua for better contrast
Aqua 700
#006B5Frgb(0, 107, 95)C:100 M:0 Y:11 K:58Dark aqua for links
✓ WCAG AA compliant
Navy Shades
Tailwind numbering: 50 (lightest) to 500 (base/darkest)
Navy 50
#F0F2F5rgb(240, 242, 245)Very light navy for subtle backgrounds
Navy 100
#E1E5EBrgb(225, 229, 235)Light navy for backgrounds
Navy 300
#5A6B8Crgb(90, 107, 140)C:100 M:60 Y:0 K:45Light navy for better readability
Navy 400
#2F4169rgb(47, 65, 105)C:100 M:60 Y:0 K:59Medium navy shade
Navy 500 (Base)
#1E2A45rgb(30, 42, 69)C:100 M:60 Y:0 K:73Base navy color
Fuchsia Shades
Tailwind numbering: 50 (lightest) to 700 (darkest)
Fuchsia 50
#FFE6F5rgb(255, 230, 245)Very light fuchsia for subtle backgrounds
Fuchsia 100
#FFCCEBrgb(255, 204, 235)Light fuchsia for backgrounds
Fuchsia 500 (Base)
#FF008Frgb(255, 0, 143)C:0 M:100 Y:44 K:0Base fuchsia color
Fuchsia 600
#BF006Brgb(191, 0, 107)C:0 M:100 Y:44 K:25Medium fuchsia shade
Fuchsia 700
#800047rgb(128, 0, 71)C:0 M:100 Y:44 K:50Dark fuchsia shade
Text Colors
Colors optimized for text readability on white backgrounds.
White
#FFFFFFrgb(255, 255, 255)C:0 M:0 Y:0 K:0Text color on dark backgrounds
Dark Gray
#333333rgb(51, 51, 51)C:0 M:0 Y:0 K:80Body text color on white backgrounds
Neutral Colors
Supporting colors for UI elements, backgrounds, and secondary text.
Medium Gray
#666666rgb(102, 102, 102)C:0 M:0 Y:0 K:60Secondary text, borders
Light Gray
#CCCCCCrgb(204, 204, 204)C:0 M:0 Y:0 K:20Backgrounds, dividers, subtle elements
Usage Examples
CSS Variables
@import './colors.css';
.button {
background-color: var(--color-aqua);
color: var(--color-navy);
}
.text-body {
color: var(--color-gray-dark);
}
JavaScript/TypeScript
import colors from './colors.json';
const primaryColor = colors.selection.aqua.hex;
const rgbValues = colors.selection.aqua.rgb;
Download Color Assets
Download the complete color palette including CSS variables, JSON definitions, and color swatches.