What are the hex codes in the Lemon Tulip & Pine palette?

The Lemon Tulip & Pine color palette consists of Gunmetal #00383A, Pine #006F76, Tulip #FF8F80, Linen #F6F3EA.

How should I use the Lemon Tulip & Pine palette on a website?

Use Linen #F6F3EA as the background, Gunmetal #00383A for text, Pine #006F76 for buttons and links, and Tulip #FF8F80 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Linen at 11.63:1.

Which colors in Lemon Tulip & Pine have enough contrast for text?

The highest-contrast pair is #00383A on #F6F3EA with a ratio of 11.63:1, which passes WCAG AA for normal text.

#00383AGunmetal

#006F76Pine

#FF8F80Tulip

#F6F3EALinen

Lemon Tulip & Pine color palette

Modern Teal Pink White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#00383A`	`rgb(0, 56, 58)`	`hsl(182, 100%, 11%)`	`oklch(30.9% 0.053 199)`
Pine	`#006F76`	`rgb(0, 111, 118)`	`hsl(184, 100%, 23%)`	`oklch(49.3% 0.084 202)`
Tulip	`#FF8F80`	`rgb(255, 143, 128)`	`hsl(7, 100%, 75%)`	`oklch(76.7% 0.138 29)`
Linen	`#F6F3EA`	`rgb(246, 243, 234)`	`hsl(45, 40%, 94%)`	`oklch(96.4% 0.012 92)`

Why it works and how to use it

Lemon Tulip & Pine is a vivid complementary color palette tagged modern, teal, pink. Near-complementary hues (about 177° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Pine takes the lead while the rest support. Lightness runs from 11% to 94%. Well suited to websites, presentations and branding.

Background: Linen (#F6F3EA) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#00383A) on #F6F3EA gives 11.63:1, passing WCAG AAA.
Primary: Pine (#006F76) is the most saturated mid-tone; use it for buttons and links (5.35:1 against the background, fine for UI elements).
Accent: Tulip (#FF8F80) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Linen at 11.63:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Lemon Tulip & Pine

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#00383A

#006F76

#FF8F80

#F6F3EA

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#00383A` on `#F6F3EA`	Aa	11.63:1	AAA
`#00383A` on `#FF8F80`	Aa	5.84:1	AA
`#006F76` on `#F6F3EA`	Aa	5.35:1	AA
`#006F76` on `#FF8F80`	Aa	2.69:1	Fail
`#00383A` on `#006F76`	Aa	2.17:1	Fail
`#FF8F80` on `#F6F3EA`	Aa	1.99:1	Fail

Similar palettes 24 more in this mood