Trello colors

The Trello color palette has 3 colors: Trello blue #0052CC, Light blue #2684FF and Wordmark navy #253858. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.

Trello color codes

Trello brand colors in HEX, RGB, HSL and OKLCH
Color	Role	HEX	RGB	HSL	OKLCH
Trello blue	Primary	#0052CC	rgb(0, 82, 204)	hsl(216, 100%, 40%)	oklch(48% 0.201 260.5)
Light blue	Secondary	#2684FF	rgb(38, 132, 255)	hsl(214, 100%, 57%)	oklch(62.8% 0.202 257.4)
Wordmark navy	Text	#253858	rgb(37, 56, 88)	hsl(218, 41%, 25%)	oklch(34.1% 0.062 260.4)

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the Trello colors come from

Trello does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors trello.com actually renders, which can differ slightly from print or logo colors.

Source (live website CSS or SVG): https://trello.com/ checked 2026-10-16

Trello color contrast

White text on Trello blue has a contrast ratio of 6.82:1 and passes WCAG AA for body text. Used as a text color, Trello blue reaches 6.82:1 on white and 3.07:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

White and black text on Trello colors
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
White on Trello blue	6.82:1	AA	Lc -87.6	Fine for body text
Black on Trello blue	3.07:1	AA large text	Lc 21.5	Dividers and decoration only
White on Light blue	3.60:1	AA large text	Lc -68.5	Content text, not long reading
Black on Light blue	5.82:1	AA	Lc 41.1	Non-text elements, placeholder text
White on Wordmark navy	11.76:1	AAA	Lc -100.5	Preferred for body text
Black on Wordmark navy	1.78:1	Fails	Lc 0.0	Not readable

Trello colors on each other
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
Wordmark navy on Light blue	3.26:1	AA large text	Lc 31.9	Non-text elements, placeholder text
Trello blue on Light blue	1.89:1	Fails	Lc 17.6	Dividers and decoration only
Wordmark navy on Trello blue	1.72:1	Fails	Lc 12.4	Not readable

Trello colors in CSS and Tailwind

Copy the Trello palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Trello blue, for hover states, borders and tinted backgrounds.

CSS variables

:root {
  --trello-blue: #0052CC;
  --trello-light-blue: #2684FF;
  --trello-wordmark-navy: #253858;
}

Tailwind CSS v4 theme

@import "tailwindcss";

@theme {
  --color-trello-blue: #0052CC;
  --color-trello-light-blue: #2684FF;
  --color-trello-wordmark-navy: #253858;
}

Tailwind scale generated from Trello blue #0052CC

@theme {
  --color-trello-50: #F0F6FF;
  --color-trello-100: #DFEBFD;
  --color-trello-200: #C5DAFE;
  --color-trello-300: #9DC2FF;
  --color-trello-400: #679FFF;
  --color-trello-500: #3B83FF;
  --color-trello-600: #1568EF;
  --color-trello-700: #0052CC;
  --color-trello-800: #0B47A8;
  --color-trello-900: #133D85;
  --color-trello-950: #0C244E;
}

Named colors closest to the Trello palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

Brand color	HEX	Nearest named color	Named HEX	ΔE OK
Trello blue	#0052CC	Blue Blue	#2242C7	0.036
Light blue	#2684FF	Clear Blue	#247AFD	0.025
Wordmark navy	#253858	Prussian Blue	#1D3557	0.015

How to use a Trello-style palette

Lead with Trello blue #0052CC for buttons, links and key highlights, with white text on it.
Give most of the layout to Wordmark navy #253858, about 60% of the screen, so Trello blue stands out.
Keep Light blue for small accents (around 10%): status colors, illustrations or charts.
As text on a white page, Trello blue reaches 6.82:1: it passes WCAG AA for body text.

To see how trello.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Trello blue into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

Trademarks

Frequently asked questions

What is the Trello hex color?

The main Trello color is Trello blue #0052CC, which is rgb(0, 82, 204) in RGB. It comes from the CSS and SVG files of Trello's live website (Trello publishes no official hex values), checked on 16 October 2026.

What colors does Trello use?

Trello uses 3 core colors: Trello blue #0052CC, Light blue #2684FF and Wordmark navy #253858.

What is Trello blue in RGB, HSL and OKLCH?

Trello blue #0052CC is rgb(0, 82, 204), hsl(216, 100%, 40%) and oklch(48% 0.201 260.5). The closest named color is Blue Blue #2242C7.

Should text on Trello blue be white or black?

White text reads better on Trello blue: it has a contrast ratio of 6.82:1, which passes WCAG AA for body text.

Where do these Trello colors come from?

The hex values were read from Trello's live website code at https://trello.com/ on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.

Can I use the Trello colors in my own design?

Colors on their own are not owned, but Trello's name, logo and the way it combines its colors are trademarks. Use these values to match Trello when you refer to it, follow its official guidelines, and do not imply a link to Trello in your own brand.

Use the Trello colors

Check trello.com live, build a color system from Trello blue, or remix the palette.

Analyze Trello's live site Build a color system from Trello colors Open in the palette generator Preview on a design