Colour and gradient inspector
Open Tools in the sidebar to list every colour in the current stylesheet. Pick one to convert it between hex, rgb(), hsl() and oklch(), and to check WCAG contrast against a background colour. Gradients found in the file are rendered as swatches so you can compare them side by side.
Formatting and diagnostics
Shift+Alt+F formats CSS, SCSS and Less with Prettier. Syntax errors such as a missing brace are underlined with the line where the parser stopped. SCSS and Less can be edited and formatted, but they are not compiled to CSS in this build.
Device presets (375, 768, 1280 pixels wide) let you check breakpoints without resizing the browser window.
How to use it
- Change --gap or a grid-template area and watch the preview.
- Pick Phone 375 in the preview size menu to test the mobile layout.
- Open Tools → Colour and click a colour chip to check its contrast.
Questions
Which colour formats does the inspector understand?
Hex (3, 4, 6 and 8 digits), rgb()/rgba(), hsl()/hsla(), oklch() and the 148 CSS named colours.
Is SCSS compiled?
No. SCSS and Less get syntax highlighting and Prettier formatting, but no Sass compiler ships in the browser build, so they cannot be previewed directly.
How is contrast calculated?
With the WCAG 2.x relative luminance formula. Semi-transparent foreground colours are composited over the background first.