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

Hex: #00FFDC
RGB: rgb(0, 255, 220)
CMYK: C:100 M:0 Y:14 K:0

Bright turquoise/aqua selection color

Navy

Hex: #1E2A45
RGB: rgb(30, 42, 69)
CMYK: C:100 M:60 Y:0 K:73

Dark blue/navy selection color

Fuchsia

Hex: #FF008F
RGB: rgb(255, 0, 143)
CMYK: C:0 M:100 Y:44 K:0

Vibrant 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

Hex: #E6FFFC
RGB: rgb(230, 255, 252)

Very light aqua for subtle backgrounds

Aqua 100

Hex: #B3FFF5
RGB: rgb(179, 255, 245)

Light aqua for backgrounds

Aqua 500 (Base)

Hex: #00FFDC
RGB: rgb(0, 255, 220)
CMYK: C:100 M:0 Y:14 K:0

Base aqua color

Aqua 600

Hex: #00BFA5
RGB: rgb(0, 191, 165)
CMYK: C:100 M:0 Y:14 K:25

Medium aqua for better contrast

Aqua 700

Hex: #006B5F
RGB: rgb(0, 107, 95)
CMYK: C:100 M:0 Y:11 K:58

Dark aqua for links

✓ WCAG AA compliant

Navy Shades

Tailwind numbering: 50 (lightest) to 500 (base/darkest)

Navy 50

Hex: #F0F2F5
RGB: rgb(240, 242, 245)

Very light navy for subtle backgrounds

Navy 100

Hex: #E1E5EB
RGB: rgb(225, 229, 235)

Light navy for backgrounds

Navy 300

Hex: #5A6B8C
RGB: rgb(90, 107, 140)
CMYK: C:100 M:60 Y:0 K:45

Light navy for better readability

Navy 400

Hex: #2F4169
RGB: rgb(47, 65, 105)
CMYK: C:100 M:60 Y:0 K:59

Medium navy shade

Navy 500 (Base)

Hex: #1E2A45
RGB: rgb(30, 42, 69)
CMYK: C:100 M:60 Y:0 K:73

Base navy color

Fuchsia Shades

Tailwind numbering: 50 (lightest) to 700 (darkest)

Fuchsia 50

Hex: #FFE6F5
RGB: rgb(255, 230, 245)

Very light fuchsia for subtle backgrounds

Fuchsia 100

Hex: #FFCCEB
RGB: rgb(255, 204, 235)

Light fuchsia for backgrounds

Fuchsia 500 (Base)

Hex: #FF008F
RGB: rgb(255, 0, 143)
CMYK: C:0 M:100 Y:44 K:0

Base fuchsia color

Fuchsia 600

Hex: #BF006B
RGB: rgb(191, 0, 107)
CMYK: C:0 M:100 Y:44 K:25

Medium fuchsia shade

Fuchsia 700

Hex: #800047
RGB: rgb(128, 0, 71)
CMYK: C:0 M:100 Y:44 K:50

Dark fuchsia shade

Text Colors

Colors optimized for text readability on white backgrounds.

White

Hex: #FFFFFF
RGB: rgb(255, 255, 255)
CMYK: C:0 M:0 Y:0 K:0

Text color on dark backgrounds

Dark Gray

Hex: #333333
RGB: rgb(51, 51, 51)
CMYK: C:0 M:0 Y:0 K:80

Body text color on white backgrounds

Neutral Colors

Supporting colors for UI elements, backgrounds, and secondary text.

Medium Gray

Hex: #666666
RGB: rgb(102, 102, 102)
CMYK: C:0 M:0 Y:0 K:60

Secondary text, borders

Light Gray

Hex: #CCCCCC
RGB: rgb(204, 204, 204)
CMYK: C:0 M:0 Y:0 K:20

Backgrounds, 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.