Palette

Citrus Grove Dawn

The invigorating burst of sun-ripened citrus fruits against a crisp morning sky.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Grove Dawn reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Citrus Grove Dawn.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FFA500#BFFF00#FFD700#87CEFA#F8F8F8

Palette guide

How to use Citrus Grove Dawn

Overview

The Citrus Grove Dawn palette is an invigorating collection that captures the burst of sun-ripened citrus against a crisp morning sky. It features a bold #FFA500 (Orange) and a vibrant #BFFF00 (Chartreuse), complemented by a radiant #FFD700 (Gold). The unexpected inclusion of a cool #87CEFA (LightSkyBlue) and a clean #F8F8F8 (White Smoke) adds a refreshing contrast. This palette offers designers and developers a dynamic range of hues for creating energetic, fresh, and slightly whimsical digital experiences. It's ideal for projects that aim to evoke vitality, clarity, and a modern, lively spirit across various applications.

Best used for

Modern health and fitness apps
Eco-conscious brand identity
Summer outdoor event branding
Youthful tech interfaces
Educational content for children
Digital marketing with a fresh, clean aesthetic

Suggested color roles

primary

#FFD700 (A bright, optimistic gold that serves as an excellent base for cheerful designs and prominent elements.)

secondary

#BFFF00 (A vibrant chartreuse, ideal for supporting content, playful accents, or secondary calls-to-action.)

accent

#FFA500 (A classic orange, perfect for impactful calls-to-action, alerts, or key highlights that demand attention.)

background

#F8F8F8 (A clean, near-white base that provides an airy and modern canvas, allowing the vibrant colors to pop.)

text

#FFA500 (For energetic text on light backgrounds, or use a dark neutral like #333333 for general readability.)

Accessibility notes

Ensure high contrast when pairing #F8F8F8 with light text; use #FFA500 or #000000 for readability.
The vibrant #FFA500, #BFFF00, and #FFD700 offer good contrast for white or very light text.
Avoid using #87CEFA for small text against #F8F8F8, as contrast may be insufficient.
For interactive elements, ensure #BFFF00 and #FFA500 have at least a 3:1 contrast ratio against surrounding colors to meet WCAG AA.

Recommended combinations

Fresh & Sky

Ideal for clean layouts with #F8F8F8 as background, #BFFF00 for fresh elements, and #87CEFA for subtle, airy details.

#F8F8F8 · #BFFF00 · #87CEFA

Zesty Impact

Excellent for energetic hero sections, with #FFD700 as background, #FFA500 for main content, and #BFFF00 for striking accents.

#FFD700 · #FFA500 · #BFFF00

Modern Contrast

Use #F8F8F8 as a clean base, #FFA500 for bold headings, and #87CEFA for complementary graphical elements or links.

#F8F8F8 · #FFA500 · #87CEFA

CSS variables

:root {
  --citrus-grove-dawn-3-1: #FFA500;
  --citrus-grove-dawn-3-2: #BFFF00;
  --citrus-grove-dawn-3-3: #FFD700;
  --citrus-grove-dawn-3-4: #87CEFA;
  --citrus-grove-dawn-3-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-grove-dawn-3": {
        1: "#FFA500",
        2: "#BFFF00",
        3: "#FFD700",
        4: "#87CEFA",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#FFA500

Color 2#BFFF00

Color 3#FFD700

Color 4#87CEFA

Color 5#F8F8F8

Accessibility

Contrast checker

1.6:1Fail

1.4:1Fail

1.2:1Fail

1.9:1Fail

1.6:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.2:1Fail

1.6:1Fail

1.9:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

Similar palettes

More like Citrus Grove Dawn

Citrus Grove Dawn

See it in context.

Ready when you are.

Built with Citrus Grove Dawn.

How to use Citrus Grove Dawn

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh & Sky

Zesty Impact

Modern Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Grove Dawn