{"id":20535699,"url":"https://github.com/rose-pine/palette","last_synced_at":"2025-07-26T18:14:05.103Z","repository":{"id":44597339,"uuid":"380295513","full_name":"rose-pine/palette","owner":"rose-pine","description":"Color palette tool for Rosé Pine","archived":false,"fork":false,"pushed_at":"2023-06-10T19:30:30.000Z","size":134,"stargazers_count":26,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T20:51:17.767Z","etag":null,"topics":["color","css","palette","rose-pine","soho-vibes"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@rose-pine/palette","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rose-pine.png","metadata":{"funding":{"github":"mvllow","patreon":"rosepine"},"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-25T16:26:39.000Z","updated_at":"2025-03-26T23:58:39.000Z","dependencies_parsed_at":"2024-06-19T14:58:19.360Z","dependency_job_id":"bf918ac4-96c1-4be0-898c-5066a23d5aeb","html_url":"https://github.com/rose-pine/palette","commit_stats":{"total_commits":58,"total_committers":3,"mean_commits":"19.333333333333332","dds":"0.051724137931034475","last_synced_commit":"7d950f087d1f9be28fae7a4169d108b38256212b"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":"mvllow/package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rose-pine%2Fpalette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rose-pine%2Fpalette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rose-pine%2Fpalette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rose-pine%2Fpalette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rose-pine","download_url":"https://codeload.github.com/rose-pine/palette/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837289,"owners_count":21169374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","css","palette","rose-pine","soho-vibes"],"created_at":"2024-11-16T00:33:31.567Z","updated_at":"2025-04-14T07:12:51.602Z","avatar_url":"https://github.com/rose-pine.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mvllow","https://patreon.com/rosepine"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png\" width=\"80\" /\u003e\n    \u003ch2 align=\"center\"\u003eRosé Pine Palette\u003c/h2\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAll natural pine, faux fur and a bit of soho vibes for the classy minimalist\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/rose-pine/rose-pine-theme\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724\u0026logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=\u0026style=for-the-badge\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Color palette tool for Rosé Pine\n\n- [Usage](#usage)\n  - [CSS variables](#css-variables)\n  - [Tailwind CSS](#tailwind-css)\n  - [JavaScript](#javascript)\n- [Specification](#specification)\n  - [Variants](#variants)\n  - [Roles](#roles)\n- [Related](#related)\n\n## Usage\n\n### CSS variables\n\n**Media**\n\n\u003e See `dist/css/rose-pine-media{-rgb,-hsl}.css`\n\nUseful for light/dark theming. Values follow the user's system theme, using\nthe dawn variant when light and main variant when dark. Moon values can be\nuncommented and used instead.\n\n**Classes**\n\n\u003e See `dist/css/rose-pine-class{-rgb,-hsl}.css`\n\nUseful for theming with more than two options. Values are set based on a\nwrapping class of `.theme-rp{-moon,-dawn}`.\n\n```css\nbody {\n\tcolor: var(--rp-text);\n\tbackground: var(--rp-base);\n}\n```\n\n**Static**\n\n\u003e See `dist/css/rose-pine{-rgb,-hsl}.css`\n\nUseful when flexibility is desired. Values include their variant's name for moon and\ndawn, allowing all variants to be individually referenced.\n\n```css\n.link-main {\n\tcolor: var(--rp-iris);\n}\n.link-moon {\n\tcolor: var(--rp-moon-iris);\n}\n.link-dawn {\n\tcolor: var(--rp-dawn-iris);\n}\n```\n\n### Tailwind CSS\n\n**Preset configuration**\n\n\u003e See `dist/tailwind/rose-pine{-media}.js`\n\n```js\n// tailwind.config.js\nmodule.exports = {\n\tpresets: [require(\"./rose-pine.js\")],\n};\n```\n\nIf using `rose-pine-media.js`, see the section below to include the necessary\nCSS variables.\n\n**CSS variables**\n\n\u003e See `dist/css/rose-pine-media-tailwind.css`\n\nThis method sets CSS variables to raw HSL values to support alpha values in\nclasses, e.g. `bg-rose/50`.\n\n### JavaScript\n\nStarting with v4, colour values are unformatted. Formatted values can be found\nin our `dist` folder. For creating new themes, it is recommended to use our\n[build tool](https://github.com/rose-pine/build).\n\n```js\nimport {variants, roles} from \"@rose-pine/palette\";\n\nvariants.moon.colors.highlightLow.hsl\n// =\u003e [245, 22, 20]\n\nvariants.moon.colors.highlightLow.alpha.hsl\n// =\u003e [249, 14%, 55%, 0.08]\n\nvariants.main.id\n// =\u003e rose-pine\n\nvariants.moon.key\n// =\u003e moon\n\nvariants.dawn.name\n// =\u003e Rosé Pine Dawn\n\nroles.base.colors.main.hex\n// =\u003e '191724'\n\nroles.surface.colors.dawn.rgb\n// =\u003e [255, 250, 243]\n\nroles.highlightLow.id\n// =\u003e highlight-low\n\nroles.highlightMed.key\n// =\u003e highlightMed\n\nroles.highlightHigh.name\n// =\u003e Highlight High\n```\n\n## Specification\n\n### Variants\n\nRosé Pine includes three variants. These are referenced as Rosé Pine, Rosé\nPine Moon, and Rosé Pine Dawn. Their codenames are main, moon, and dawn\nrespectively. Naming does not include \"main\" unless necessary. When used as\nfile names, prefer snake-case. E.g. rose-pine, rose-pine-moon, and\nrose-pine-dawn.\n\n### Roles\n\n**Neutral**\n\n| Role            | Description                               | Usage                                                                                                               |\n| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| `base`          | Primary background                        | inactive tabs, sidebars                                                                                             |\n| `surface`       | Low contrast background atop `base`       | text inputs, panels                                                                                                 |\n| `overlay`       | Medium contrast background atop `surface` | text inputs, panels, active tabs                                                                                    |\n| `muted`         | Low contrast foreground                   | comments, git ignored                                                                                               |\n| `subtle`        | Medium contrast foreground                | non-selected results, inactive tabs, punctuation, operators                                                         |\n| `text`          | High contrast foreground                  | cursor text, selected results, selection foreground (paired with `highlightMed` background), active tabs, variables |\n| `highlightLow`  | Low contrast highlight                    | cursor line                                                                                                         |\n| `highlightMed`  | Medium contrast highlight                 | selection background (paired with `text` foreground)                                                                |\n| `highlightHigh` | High contrast highlight                   | cursor background, borders                                                                                          |\n\n**Accent**\n\n| Role   | Usage                                                            |\n| ------ | ---------------------------------------------------------------- |\n| `love` | terminal red, builtins, errors, git delete                       |\n| `gold` | terminal yellow, strings, warnings                               |\n| `rose` | terminal cyan, booleans, git change, git dirty, git text         |\n| `pine` | terminal green, functions, git rename                            |\n| `foam` | terminal blue, object keys, info, git add                        |\n| `iris` | terminal magenta, parameters, links, hints, git merge, git stage |\n\n## Related\n\n- [rosepinetheme.com/palette](https://rosepinetheme.com/palette)\n- [@rose-pine/build](https://github.com/rose-pine/build)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frose-pine%2Fpalette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frose-pine%2Fpalette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frose-pine%2Fpalette/lists"}