By Harry Roberts
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
Core Web Vitals Colours
Written by Harry Roberts on CSS Wizardry.
N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…
Table of Contents
If, like me, you frequently need the official1 Core Web Vitals colours for slides and presentations, here you go:
-
Good
#09ce6b -
Needs Improvement
#ffa400 -
Poor
#ff4e42
More Colour Formats?
Good
- RGB:
rgb(9, 206, 107) - HSL:
hsl(150, 92%, 42%) - HWB:
hwb(150, 4%, 19%)
Needs Improvement
- RGB:
rgb(255, 164, 0) - HSL:
hsl(39, 100%, 50%) - HWB:
hwb(39, 0%, 0%)
Poor
- RGB:
rgb(255, 78, 66) - HSL:
hsl(4, 100%, 63%) - HWB:
hwb(4, 26%, 0%)
-
‘Official’ as in sampled from PageSpeed Insights and web.dev. ↩
N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
Projects
- ITCSS – coming soon…
Next Appearance
-
Talk
Devoxx Greece: Athens (Greece), April 2025