Sunset Coast

#FF8C69

#FFA07A

#FFDAB9

#4682B4

#2F4F4F

Actions

Explore the palette in different formats, and actions.

Colors overview

Sunset glow meets ocean depths, a warm yet grounded palette.

AI-generated description.

Orange

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ff8c69	rgb(255, 140, 105)	hsl(14 100% 71%)	oklab(76% 0.12 0.09)	oklch(76% 0.15 38)	color(display-p3 0.94 0.57 0.44)
	#ffa07a	rgb(255, 160, 122)	hsl(17 100% 74%)	oklab(79% 0.09 0.08)	oklch(79% 0.12 42)	color(display-p3 0.95 0.64 0.51)
	#ffdab9	rgb(255, 218, 185)	hsl(28 100% 86%)	oklab(91% 0.03 0.05)	oklch(91% 0.06 64)	color(display-p3 0.98 0.86 0.74)
	#4682b4	rgb(70, 130, 180)	hsl(210 44% 49%)	oklab(59% -0.04 -0.09)	oklch(59% 0.1 250)	color(display-p3 0.33 0.5 0.69)
	#2f4f4f	rgb(47, 79, 79)	hsl(180 25% 25%)	oklab(40% -0.04 -0.01)	oklch(40% 0.04 200)	color(display-p3 0.21 0.31 0.31)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#FF8C69

AA - 2.28



#FFA07A

AA - 1.98



#FFDAB9

AA - 1.31



#4682B4

AA - 4.1



#2F4F4F

AAA - 8.92



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(75.8% 0.117 0.091), oklab(79.4% 0.092 0.084), oklab(91.1% 0.027 0.054), oklab(58.8% -0.041 -0.091), oklab(40.3% -0.036 -0.01))

Fallback colors



background: linear-gradient(45deg, #FF8C69, #FFA07A, #FFDAB9, #4682B4, #2F4F4F)

Colors



<!-- Primary Colors -->
<color name="sunset_coast_color_10">#FF8C69</color>
<color name="sunset_coast_color_20">#FFA07A</color>
<color name="sunset_coast_color_30">#FFDAB9</color>
<color name="sunset_coast_color_40">#4682B4</color>
<color name="sunset_coast_color_50">#2F4F4F</color>

PWA prompt