{"id":27158060,"url":"https://github.com/yorukot/colorsrc","last_synced_at":"2025-04-08T21:54:43.994Z","repository":{"id":284744037,"uuid":"955719556","full_name":"yorukot/ColorSrc","owner":"yorukot","description":"A powerful tool for converting between multiple color formats. Built with Next.js, Shadcn UI, and Framer Motion.","archived":false,"fork":false,"pushed_at":"2025-03-27T12:57:25.000Z","size":4704,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T13:26:20.100Z","etag":null,"topics":["color-converter","css-colors","hsl-converter","oklch-converter"],"latest_commit_sha":null,"homepage":"https://colorsrc.yorukot.me","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/yorukot.png","metadata":{"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":"2025-03-27T04:54:02.000Z","updated_at":"2025-03-27T12:57:28.000Z","dependencies_parsed_at":"2025-03-27T13:36:25.312Z","dependency_job_id":null,"html_url":"https://github.com/yorukot/ColorSrc","commit_stats":null,"previous_names":["yorukot/colorsrc"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorukot%2FColorSrc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorukot%2FColorSrc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorukot%2FColorSrc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yorukot%2FColorSrc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yorukot","download_url":"https://codeload.github.com/yorukot/ColorSrc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934789,"owners_count":21020725,"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-converter","css-colors","hsl-converter","oklch-converter"],"created_at":"2025-04-08T21:54:43.534Z","updated_at":"2025-04-08T21:54:43.986Z","avatar_url":"https://github.com/yorukot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ColorSrc\n\nA powerful tool for converting between multiple color formats. Built with Next.js, Shadcn UI, and Framer Motion.\n\n[![Demo](https://img.shields.io/badge/Live%20Demo-colorsrc.yorukot.me-blue?style=for-the-badge)](https://colorsrc.yorukot.me)\n[![GitHub](https://img.shields.io/badge/GitHub-Repo-green?style=for-the-badge)](https://github.com/yorukot/colorsrc)\n[![License](https://img.shields.io/badge/License-MIT-yellow?style=for-the-badge)](LICENSE)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"asset/colorsrc-demo.gif\" alt=\"ColorSrc demo\" width=\"650\" /\u003e\n\u003c/p\u003e\n\n## Overview\n\nColorSrc is a modern web application for converting between various color formats used in web development and design. It provides accurate conversions with an intuitive interface to streamline workflow for developers and designers.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"asset/colorsrc-overview.png\" alt=\"ColorSrc Overview\" width=\"600\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Multiple Format Support**: HEX, RGB, HSL, OKLAB, OKLCH\n- **Batch Conversion**: Process multiple colors at once\n- **CSS Variables**: Preserve variable names during conversion  \n- **Alpha Support**: Full transparency channel handling\n- **Auto-Detection**: Automatic identification of input color formats\n- **Simplified Output**: Option to display just values without format names\n- **Progressive Web App**: Available for offline use\n\n## Usage\n\n1. **Select Formats**:\n   - Choose your source format (or use Auto Detect)\n   - Select your target format\n   - Use the swap button (↔️) to quickly switch between formats\n\n2. **Input Colors**:\n   - Enter one or more color values\n   - Support for multiple lines and CSS variables\n   - Auto-detection works as you type\n\n3. **Conversion**:\n   - Click \"Convert\" to process the input\n   - Results appear in the output section\n   - Use the \"Copy\" button to copy all results to clipboard\n\n4. **Simplified Output**:\n   - Toggle the \"Simplified output\" checkbox to remove format names\n   - Example: `0.63 0.25 20` instead of `oklch(0.63 0.25 20)`\n\n## Color Format Support\n\n### HEX\nStandard hexadecimal notation used in CSS and design tools.\n- **Supported Formats**:\n  - `#RGB`\n  - `#RGBA`\n  - `#RRGGBB`\n  - `#RRGGBBAA`\n- **Example**: `#ff0044`, `#f04`, `#ff0044cc`\n\n### HSL\nHue, Saturation, Lightness format that's intuitive for humans.\n- **Supported Formats**:\n  - `hsl(h s% l%)`\n  - `hsl(h s% l% / a)`\n  - `h s% l%` (raw values)\n- **Example**: `hsl(344 100% 50%)`, `hsl(344 100% 50% / 0.5)`, `344 100% 50%`\n\n### OKLAB\nPerceptually uniform LAB color space for more accurate color manipulation.\n- **Supported Formats**:\n  - `oklab(l a b)`\n  - `oklab(l a b / a)`\n  - `l a b` (raw values)\n- **Example**: `oklab(0.63 0.24 0.09)`, `oklab(0.63 0.24 0.09 / 0.8)`, `0.63 0.24 0.09`\n\n### OKLCH\nPerceptual color space with intuitive cylindrical coordinates.\n- **Supported Formats**:\n  - `oklch(l c h)`\n  - `oklch(l c h / a)`\n  - `l c h` (raw values)\n- **Example**: `oklch(0.63 0.25 20)`, `oklch(0.63 0.25 20 / 0.9)`, `0.63 0.25 20`\n\n### RGB\nClassic Red, Green, Blue format widely used in web and design.\n- **Supported Formats**:\n  - `rgb(r g b)`\n  - `rgb(r g b / a)`\n  - `r g b` (raw values)\n- **Example**: `rgb(255 0 68)`, `rgb(255 0 68 / 0.5)`, `255 0 68`\n\n## Examples\n\n### Converting CSS Variables\n\n```css\n/* Input (HSL) */\n--primary: 220 100% 50%;\n--secondary: 280 75% 60%;\n\n/* Output (OKLCH) */\n--primary: oklch(0.57 0.23 260);\n--secondary: oklch(0.65 0.20 305);\n```\n\n### Color Palette Conversion with Alpha\n\n```css\n/* Input */\n--overlay: rgba(0, 0, 0, 0.5);\n--glass: hsla(200, 100%, 50%, 0.2);\n\n/* Output */\n--overlay: oklch(0.00 0.00 0 / 50%);\n--glass: oklch(0.63 0.20 233 / 20%);\n```\n\n## Installation\n\n### Prerequisites\n- Node.js 18.x or higher\n- npm, yarn, or pnpm\n\n### Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/yorukot/colorsrc.git\ncd colorsrc\n\n# Install dependencies\npnpm install  # or npm/yarn\n\n# Start development server\npnpm dev      # or npm run dev/yarn dev\n\n# Open http://localhost:3000\n```\n\n## License\n\nMIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgements\n\n- [Colorizr](https://github.com/gilbarbara/colorizr) - Color conversion algorithms\n- [Shadcn UI](https://ui.shadcn.com/) - UI components\n- [Framer Motion](https://www.framer.com/motion/) - Animations\n- [Lucide Icons](https://lucide.dev/) - Icons\n- [Next.js](https://nextjs.org/) - Framework\n\n---\n\n\u003cp align=\"center\"\u003e\n  Built with ❤️ by \u003ca href=\"https://github.com/yorukot\"\u003eYorukot\u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyorukot%2Fcolorsrc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyorukot%2Fcolorsrc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyorukot%2Fcolorsrc/lists"}