Arrange a Masterclass

Core Web Vitals Colours

Written by 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
  1. More Colour Formats?

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%)
  1. ‘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


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.



Did this help? We can do way more!


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.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.