Palette

Clean Edge

A crisp, contemporary palette featuring a spectrum of greys highlighted with a single, striking golden accent.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clean Edge 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 Clean Edge.

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

Data visualization

#F5F5F5#D3D3D3#A9A9A9#696969#FFD700

Palette guide

How to use Clean Edge

Overview

The Clean Edge palette presents a crisp, contemporary aesthetic, combining a sophisticated spectrum of grays with a single, striking golden accent. Ranging from the light #F5F5F5 to the deep #696969, these grays provide a versatile foundation for modern and urban designs. The vibrant #FFD700 (Gold) introduces an element of luxury and emphasis, allowing designers to highlight key information or brand elements with precision. Developers can leverage this palette to create polished interfaces that are both functional and visually impactful, using the grays for structure and the gold for strategic focal points across web and mobile applications.

Best used for

Modern corporate websites
Luxury product e-commerce
Tech startup branding
Architectural or interior design portfolios
Event promotions requiring a sophisticated touch
Urban lifestyle blogs or apps

Suggested color roles

primary

#696969 serves as a strong, sophisticated primary, excellent for headings, navigation, or foundational branding.

secondary

#A9A9A9 provides a balanced mid-gray, suitable for content blocks, subheadings, or secondary interactive elements.

accent

#FFD700 (Gold) is the powerful accent, perfect for call-to-actions, vital icons, or highlighting premium features.

background

#F5F5F5 creates a clean, light background, ensuring high readability for darker text and a modern feel.

text

For dark text on light backgrounds, #696969 or black is recommended. For light text on dark backgrounds, #F5F5F5 works well.

Accessibility notes

Ensure #696969 text on #F5F5F5 background meets WCAG AAA standards for optimal readability.
Avoid using #D3D3D3 text on #F5F5F5 background due to insufficient contrast.
The #FFD700 accent should have sufficient contrast when used for text or interactive elements on any gray background, especially #A9A9A9 or #D3D3D3.
Always test contrast ratios, particularly for text set in #A9A9A9 on #F5F5F5, to ensure it's easily legible for all users.

Recommended combinations

Modern Foundation

Ideal for a sophisticated website layout, with #696969 for strong headings, #F5F5F5 for clean backgrounds, and #FFD700 for key calls to action.

#696969 · #F5F5F5 · #FFD700

Subtle Layers

Perfect for creating subtle visual hierarchy in content cards or background patterns, maintaining a clean aesthetic.

#F5F5F5 · #D3D3D3 · #A9A9A9

Accent Highlight

Use #A9A9A9 for content panels, #696969 for text, and #FFD700 to draw attention to important links or icons.

#A9A9A9 · #696969 · #FFD700

CSS variables

:root {
  --clean-edge-1: #F5F5F5;
  --clean-edge-2: #D3D3D3;
  --clean-edge-3: #A9A9A9;
  --clean-edge-4: #696969;
  --clean-edge-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clean-edge": {
        1: "#F5F5F5",
        2: "#D3D3D3",
        3: "#A9A9A9",
        4: "#696969",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#F5F5F5

Color 2#D3D3D3

Color 3#A9A9A9

Color 4#696969

Color 5#FFD700

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

5:1AA

1.3:1Fail

1.4:1Fail

1.6:1Fail

3.7:1AA18

1.1:1Fail

2.2:1Fail

1.6:1Fail

2.3:1Fail

1.7:1Fail

5:1AA

3.7:1AA18

2.3:1Fail

3.9:1AA18

1.3:1Fail

1.1:1Fail

1.7:1Fail

3.9:1AA18

Similar palettes

More like Clean Edge

View all neutral

Brutalist Bloom Grey

Concrete Bloom Resilient

Concrete Garden Grey

Concrete Grid Lines

Concrete Jungle

Concrete Jungle Bloom