Home

Awesome

<p align="center"> <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" /> <h2 align="center">Rosé Pine Palette</h2> </p> <p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p> <p align="center"> <a href="https://github.com/rose-pine/rose-pine-theme"> <img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" /> </a> </p>

Color palette tool for Rosé Pine

Usage

CSS variables

Media

See dist/css/rose-pine-media{-rgb,-hsl}.css

Useful for light/dark theming. Values follow the user's system theme, using the dawn variant when light and main variant when dark. Moon values can be uncommented and used instead.

Classes

See dist/css/rose-pine-class{-rgb,-hsl}.css

Useful for theming with more than two options. Values are set based on a wrapping class of .theme-rp{-moon,-dawn}.

body {
	color: var(--rp-text);
	background: var(--rp-base);
}

Static

See dist/css/rose-pine{-rgb,-hsl}.css

Useful when flexibility is desired. Values include their variant's name for moon and dawn, allowing all variants to be individually referenced.

.link-main {
	color: var(--rp-iris);
}
.link-moon {
	color: var(--rp-moon-iris);
}
.link-dawn {
	color: var(--rp-dawn-iris);
}

Tailwind CSS

Preset configuration

See dist/tailwind/rose-pine{-media}.js

// tailwind.config.js
module.exports = {
	presets: [require("./rose-pine.js")],
};

If using rose-pine-media.js, see the section below to include the necessary CSS variables.

CSS variables

See dist/css/rose-pine-media-tailwind.css

This method sets CSS variables to raw HSL values to support alpha values in classes, e.g. bg-rose/50.

JavaScript

Starting with v4, colour values are unformatted. Formatted values can be found in our dist folder. For creating new themes, it is recommended to use our build tool.

import {variants, roles} from "@rose-pine/palette";

variants.moon.colors.highlightLow.hsl
// => [245, 22, 20]

variants.moon.colors.highlightLow.alpha.hsl
// => [249, 14%, 55%, 0.08]

variants.main.id
// => rose-pine

variants.moon.key
// => moon

variants.dawn.name
// => Rosé Pine Dawn

roles.base.colors.main.hex
// => '191724'

roles.surface.colors.dawn.rgb
// => [255, 250, 243]

roles.highlightLow.id
// => highlight-low

roles.highlightMed.key
// => highlightMed

roles.highlightHigh.name
// => Highlight High

Specification

Variants

Rosé Pine includes three variants. These are referenced as Rosé Pine, Rosé Pine Moon, and Rosé Pine Dawn. Their codenames are main, moon, and dawn respectively. Naming does not include "main" unless necessary. When used as file names, prefer snake-case. E.g. rose-pine, rose-pine-moon, and rose-pine-dawn.

Roles

Neutral

RoleDescriptionUsage
basePrimary backgroundinactive tabs, sidebars
surfaceLow contrast background atop basetext inputs, panels
overlayMedium contrast background atop surfacetext inputs, panels, active tabs
mutedLow contrast foregroundcomments, git ignored
subtleMedium contrast foregroundnon-selected results, inactive tabs, punctuation, operators
textHigh contrast foregroundcursor text, selected results, selection foreground (paired with highlightMed background), active tabs, variables
highlightLowLow contrast highlightcursor line
highlightMedMedium contrast highlightselection background (paired with text foreground)
highlightHighHigh contrast highlightcursor background, borders

Accent

RoleUsage
loveterminal red, builtins, errors, git delete
goldterminal yellow, strings, warnings
roseterminal cyan, booleans, git change, git dirty, git text
pineterminal green, functions, git rename
foamterminal blue, object keys, info, git add
iristerminal magenta, parameters, links, hints, git merge, git stage

Related