Playground

Explore the colours in interfaces, code, and terminals.

Variant

Accent: Rose

Surfaces, text, and everyday controls.

bg2 / 72%

A few notes from today's project.

Updated today

bg2

Inset surfacebg0

SuccessWarningErrorInfo

Example link

IDEtheme.css

1/* coal / rose */
2.card {
3background: var(--fl-coal-bg2);
4border: 1px solid var(--fl-coal-bg3);
5color: var(--fl-coal-fg1);
6}

Terminal~/firelight

ls

firelight.cssfirelight.json

echo firelight

firelight

Difftheme.css

12.card {

13background: var(--fl-coal-bg2);

14border-color: var(--fl-coal-bg2);

14border-color: var(--fl-coal-bg3);

15color: var(--fl-coal-fg1);

16}

Try a background and a colour together in all three variants. You can add your own text too.

Preview

BackgroundForegroundTextForeground opacity 100%

Coalbg1 / rose

Hello, world.

Text contrast5.42:1

Smoulderbg1 / rose

Hello, world.

Text contrast4.72:1

Ashbg1 / rose

Hello, world.

Text contrast4.67:1