{"id":21392460,"url":"https://github.com/0xC0A1/pigment","last_synced_at":"2025-07-13T18:31:21.901Z","repository":{"id":41724123,"uuid":"237357425","full_name":"0xC0A1/pigment","owner":"0xC0A1","description":"A powerful library that provides color-conversions, palette/scheme generation, color manipulation and many more features intended to provide a great UX.","archived":true,"fork":false,"pushed_at":"2025-02-19T20:19:28.000Z","size":1845,"stargazers_count":29,"open_issues_count":24,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-06T07:06:56.993Z","etag":null,"topics":["color-conversions","color-schemes","cssinjs","flat-colors","hsl","rgb"],"latest_commit_sha":null,"homepage":"https://pigment-react-web-example.netlify.com/","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/0xC0A1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-01-31T04:06:36.000Z","updated_at":"2025-02-19T20:35:19.000Z","dependencies_parsed_at":"2025-02-19T21:26:13.932Z","dependency_job_id":"7d2de08b-7898-4e9e-8f7e-fc2900e3f55e","html_url":"https://github.com/0xC0A1/pigment","commit_stats":null,"previous_names":["0xc0a1/pigment","kevinrodriguez-io/pigment"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/0xC0A1/pigment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xC0A1%2Fpigment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xC0A1%2Fpigment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xC0A1%2Fpigment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xC0A1%2Fpigment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xC0A1","download_url":"https://codeload.github.com/0xC0A1/pigment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xC0A1%2Fpigment/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265186582,"owners_count":23724700,"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-conversions","color-schemes","cssinjs","flat-colors","hsl","rgb"],"created_at":"2024-11-22T13:40:52.074Z","updated_at":"2025-07-13T18:31:21.896Z","avatar_url":"https://github.com/0xC0A1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6248571/73606093-3c611000-456c-11ea-997d-3032c6a2ca1e.png\" alt=\"Logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ePigment 🌈 - A Colorful JS Framework\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/kevinrodriguez-io/pigment/watchers\"\u003e\u003cimg src=\"https://img.shields.io/github/watchers/kevinrodriguez-io/pigment?style=social\" alt=\"Watch on GitHub\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/kevinrodriguez-io/pigment/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/kevinrodriguez-io/pigment?style=social\" alt=\"Star on GitHub\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check out Pigment 🌈, a Colorful JS framework to generate dynamic user interfaces. https://github.com/kevinrodriguez-io/pigment\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/kevinrodriguez-io/pigment.svg?style=social\" alt=\"Tweet!\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/@kevinrodriguez-io/pigment-core\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@kevinrodriguez-io/pigment-core.svg?label=@kevinrodriguez-io/pigment-core\u0026style=flat-square\" alt=\"@kevinrodriguez-io/pigment\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://lerna.js.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square\" alt=\"lerna\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@kevinrodriguez-io/pigment-core\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/@kevinrodriguez-io/pigment-core?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pigment-react-web-example.netlify.com/\"\u003eLive tool/example\u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\nPigment is a lightweight, yet powerful, color framework for the web, react-native (WIP) and any other JS-Based project. It is built on the idea that software applications should function effortlessly while simultaneously maintaining their beautiful interfaces.\n\nWith Pigment, you can easily stop tinkering with RGB values, wasting hours figuring out the right color combinations to use in your app, and worrying about whether your text will be readable on the various background colors of your app.\n\nDoes this sound familiar? That's because Pigment is heavily inspired by Vicc Alexander's [Chameleon Framework](https://github.com/viccalexander/Chameleon), which provides this functionality for native iOS (OBJC \u0026 Swift 3).\n\n![Flat Colors](https://user-images.githubusercontent.com/6248571/73604634-6eb54200-4559-11ea-8b9e-f29c3ece0793.png)\n\n## Features\n\n![Features](https://user-images.githubusercontent.com/6248571/73604650-c2279000-4559-11ea-8dfd-76d8fa5e9497.png)\n\n- Color conversions between:\n  - HEX\n  - RGB\n  - HSL\n  - LAB\n  - XYZ\n- 24 Hand-Picked Flat Colors in both shades (Light and Dark)\n- Color shades generation\n- Find most similar hand-picked Flat color from another color\n- Get contrasting color text (Black / White) from another color\n- Generate Color Schemes:\n  - Analogous\n  - Complementary\n  - Triadic\n- Compatible with Chameleon Framework's Sketch, PhotoShop and Storyboard [plugins](https://github.com/viccalexander/Chameleon/tree/master/Extras).\n\n## Examples\n\n- App theming with styled-components [example](https://pigment-react-styled-components-example.netlify.com/) / [source](https://github.com/kevinrodriguez-io/pigment/tree/master/apps/react-styled-components-example)\n\n## Installing\n\n```bash\n$ yarn add @kevinrodriguez-io/pigment-core\n# or\n$ npm i @kevinrodriguez-io/pigment-core\n```\n\n\n## Usage\n\n- Wrap your color \\* Supported formats: HEX, RGB, HSL\n\n```ts\nimport { Color, Colors } from '@kevinrodriguez-io/pigment-core'\n\nconst hex = Colors.flatRed.light\nconst color = new Color(hex)\n```\n\n- Get complementary color\n\n```ts\ncolor.complementaryColor\n```\n\n- Get most similar Hand-Picked Flat color\n\n```ts\ncolor.nearestFlatColor\n```\n\n- Get all color shades with a 25% separation\n\n```ts\ncolor.all(25)\ncolor.nearestFlatColor.all(25) // Flat-color shades\n```\n\n- Get color tints/shades (Array or single item) with a 25% separation\n\n```ts\ncolor.tints(25)\ncolor.shades(25)\ncolor.tint(25) // Just one color\ncolor.shade(25) // Just one color\n```\n\n- Get analogous color scheme (Regular \u0026 Flat)\n\n```ts\ncolor.analogousColorScheme\ncolor.analogousFlatColorScheme\n```\n\n- Get complementary color scheme\n\n```ts\ncolor.complementaryColorScheme\ncolor.complementaryFlatColorScheme\n```\n\n- Get triadic color scheme\n\n```ts\ncolor.triadicColorScheme\ncolor.triadicFlatColorScheme\n```\n\n- Get contrasting text color (Black/White)\n\n```ts\ncolor.contrastingTextColor\ncolor.contrastingFlatTextColor // Flat version\n```\n\n## Coming soon\n\n- ~~Global-theming examples with styled-components (CSS in JS)~~\n- React-based bindings and hooks\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xC0A1%2Fpigment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xC0A1%2Fpigment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xC0A1%2Fpigment/lists"}