Teal#2B6F6D
White#FFFFFF
Sienna#8B5E3C
Slate Teal#4A8F8B
Pale Green#A3C1B7
Palette direction

Teal White Rabbit Color Palette

This color palette is inspired by the deep teal background and the crisp white silhouette in the image, combining a strong, distinctive greenish-teal with clean whites and complementary accent colors to create a balanced, nature-inspired identity. The teal main color conveys tranquility and trust, while the white provides clarity and contrast. Accent colors add warmth and versatility without overpowering the main hues, making the palette suitable for both bold headlines and subtle UI elements.

ComplementaryCreativetealwhitegreencalm
palette-preview.example
Creative color direction

Teal White Rabbit Color Palette

This color palette is inspired by the deep teal background and the crisp white silhouette in the image, combining a strong, distinctive greenish-teal with clean whites and complementary accent colors to create a balanced, nature-inspired identity. The teal main color conveys tranquility and trust, while the white provides clarity and contrast. Accent colors add warmth and versatility without overpowering the main hues, making the palette suitable for both bold headlines and subtle UI elements.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal #2B2D2Fon White #FFFFFF13.8:1 Excellent
Logo White #FFFFFFon Teal #2B6F6D5.8:1 Strong
Logo White #FFFFFFon Sienna #8B5E3C5.6:1 Strong
Logo White #FFFFFFon Charcoal #2B2D2F13.8:1 Excellent
Icon color
BackgroundTeal#2B6F6DTextSnow#F8F9FA
Primary Button5.54:1
AA

Best for the main action users should notice first.

BackgroundWhite#FFFFFFTextCharcoal#2B2D2F
Secondary Button13.82:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextTeal#2B6F6D
Outlined Button5.84:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextTeal#2B6F6D
Text Button5.84:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Teal White Rabbit Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CTeal White Rabbit Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors feature a deep teal and a crisp white that work together to create a memorable and calming identity, grounded with a warm brown accent to complement the teal and add warmth.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Teal #2B6F6D
HeadlineUsed for main titles and key messages.Teal #2B6F6D
LinkUsed for links and interactive text.Teal #2B6F6D

Buttons

Primary Button
BackgroundTeal #2B6F6D
TextSnow #F8F9FA
Secondary Button
BackgroundWhite #FFFFFF
TextCharcoal #2B2D2F
Outlined Button
BackgroundTeal #2B6F6D
TextTeal #2B6F6D

Interface

TextDefault readable body text.Charcoal #2B2D2F
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Slate Gray #616466
IconSmall interface icons and marks.Slate Teal #4A8F8B
BorderCards, inputs, and component borders.Slate Teal #4A8F8B
DividerSubtle separators between content.Slate Teal #4A8F8B
OutlineFocus rings and emphasis outlines.Slate Teal #4A8F8B

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors feature a deep teal and a crisp white that work together to create a memorable and calming identity, grounded with a warm brown accent to complement the teal and add warmth.

PrimaryTeal

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Teal provides a calm, trustworthy feeling, evoking nature and stability for a grounded brand presence.

HEX#2B6F6D
RGB43, 111, 109
HSL178, 44, 30
CMYK61, 0, 2, 56
SecondaryWhite

RolesBg Light, Btn Secondary Bg

White ensures clarity and clean contrast, making content easy to read and visually crisp.

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
TertiarySienna

Sienna adds a warm, earthy tone to balance the coolness of teal, introducing subtle richness and approachability.

HEX#8B5E3C
RGB139, 94, 60
HSL26, 40, 39
CMYK0, 32, 57, 45

Support Colors

The support colors extend the core palette with gentle, muted blues and greens that harmonize with teal, providing subtle accents and secondary interface elements that remain visually soft and supportive.

Slate Teal

RolesIcon, Border, Divider, Outline

Slate Teal offers a softer, muted variant of the main teal to create unobtrusive interface elements and define structure.

HEX#4A8F8B
RGB74, 143, 139
HSL177, 32, 43
CMYK48, 0, 3, 44
Pale Green

Pale Green provides a light, refreshing accent that complements the teal and strengthens the natural, calming aesthetic.

HEX#A3C1B7
RGB163, 193, 183
HSL160, 19, 70
CMYK16, 0, 5, 24

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Snow

RolesBtn Primary Text

HEX#F8F9FA
RGB248, 249, 250
HSL210, 17, 98
CMYK1, 0, 0, 2
Charcoal

RolesText, Btn Secondary Text

HEX#2B2D2F
RGB43, 45, 47
HSL210, 4, 18
CMYK9, 4, 0, 82
Slate Gray

RolesBg Dark

HEX#616466
RGB97, 100, 102
HSL204, 3, 39
CMYK5, 2, 0, 60

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-teal: #2B6F6D;
  --color-white: #FFFFFF;
  --color-sienna: #8B5E3C;
  --color-slate-teal: #4A8F8B;
  --color-pale-green: #A3C1B7;
  --color-snow: #F8F9FA;
  --color-charcoal: #2B2D2F;
  --color-slate-gray: #616466;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #2B6F6D;
  --role-link: #2B6F6D;
  --role-btn-primary-bg: #2B6F6D;
  --role-btn-outlined-border: #2B6F6D;
  --role-btn-outlined-text: #2B6F6D;
  --role-headline: #2B6F6D;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-bg: #FFFFFF;
  --role-icon: #4A8F8B;
  --role-border: #4A8F8B;
  --role-divider: #4A8F8B;
  --role-outline: #4A8F8B;
  --role-btn-primary-text: #F8F9FA;
  --role-text: #2B2D2F;
  --role-btn-secondary-text: #2B2D2F;
  --role-bg-dark: #616466;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "teal": "#2B6F6D",
    "white": "#FFFFFF",
    "sienna": "#8B5E3C",
    "slate-teal": "#4A8F8B",
    "pale-green": "#A3C1B7",
    "snow": "#F8F9FA",
    "charcoal": "#2B2D2F",
    "slate-gray": "#616466"
}
Press Space to load new palette