{"id":16773177,"url":"https://github.com/glook/palette-creator","last_synced_at":"2025-04-10T20:04:03.359Z","repository":{"id":74256021,"uuid":"184126131","full_name":"glook/palette-creator","owner":"glook","description":null,"archived":false,"fork":false,"pushed_at":"2019-05-02T23:06:41.000Z","size":1080,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T11:10:00.055Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://glook.github.io/palette-creator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-04-29T18:52:20.000Z","updated_at":"2019-10-31T17:11:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"21819435-ec1a-417c-bf5e-69c747e755b2","html_url":"https://github.com/glook/palette-creator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glook%2Fpalette-creator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glook%2Fpalette-creator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glook%2Fpalette-creator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glook%2Fpalette-creator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glook","download_url":"https://codeload.github.com/glook/palette-creator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248287874,"owners_count":21078799,"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":[],"created_at":"2024-10-13T06:44:55.678Z","updated_at":"2025-04-10T20:04:03.335Z","avatar_url":"https://github.com/glook.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# palette-creator\n\nSimple palette generator inspired by [google material palette generator](https://material.io/inline-tools/color/).\n\n## Demo\n\nDo you want to see it in action? Visit [glook.github.io/palette-creator/](//glook.github.io/palette-creator/)\n\n## Installation\nuse npm:\n\n```\nnpm i palette-creator --save\n```\n\nor yarn:\n\n```\nyarn add palette-creator\n```\n\n## Usage\nJust import palette generator:\n\n#### es6\n```\nimport PaletteGenerator from 'palette-creator';\n```\n\n#### or using require function\n```\nvar PaletteGenerator = require('palette-creator');\n```\n\n\n## create palette\n\n```\nconst palette = PaletteGenerator.getPalette('#F0EBF9');\n```\nPalette will contain object with colors grouped by shades. Every collor contains hex, hsl, rgb and contrast color.\n\n```\n50: {hsl: \"hsl(259.5, 54.3%, 95%)\", hex: \"#F0EBF9\", rgb: \"rgb(240, 235, 249)\", contrastColor: {…}, isPrimary: false, …}\n100: {hsl: \"hsl(259.5, 48.3%, 85%)\", hex: \"#D2C6EB\", rgb: \"rgb(210, 198, 235)\", contrastColor: {…}, isPrimary: false, …}\n200: {hsl: \"hsl(259.5, 42.3%, 75%)\", hex: \"#B6A4DA\", rgb: \"rgb(182, 164, 218)\", contrastColor: {…}, isPrimary: false, …}\n300: {hsl: \"hsl(259.5, 36.3%, 65%)\", hex: \"#9A85C6\", rgb: \"rgb(154, 133, 198)\", contrastColor: {…}, isPrimary: false, …}\n400: {hsl: \"hsl(259.5, 30.3%, 55%)\", hex: \"#8069AF\", rgb: \"rgb(128, 106, 175)\", contrastColor: {…}, isPrimary: false, …}\n500: {hsl: \"hsl(259.5, 24.3%, 45%)\", hex: \"#69578F\", rgb: \"rgb(105, 87, 143)\", contrastColor: {…}, isPrimary: false, …}\n600: {hsl: \"hsl(259.5, 18.3%, 35%)\", hex: \"#54496A\", rgb: \"rgb(84, 73, 106)\", contrastColor: {…}, isPrimary: true, …}\n700: {hsl: \"hsl(259.5, 12.3%, 25%)\", hex: \"#3D3848\", rgb: \"rgb(61, 56, 72)\", contrastColor: {…}, isPrimary: false, …}\n800: {hsl: \"hsl(259.5, 6.3%, 20%)\", hex: \"#323036\", rgb: \"rgb(50, 48, 54)\", contrastColor: {…}, isPrimary: false, …}\n900: {hsl: \"hsl(259.5, 0.3%, 15%)\", hex: \"#262626\", rgb: \"rgb(38, 38, 38)\", contrastColor: {…}, isPrimary: false, …}\n```\n\n## getting similar colors \n\n```\nconst similarColors = PaletteGenerator.getSimilar('#F0EBF9');\n```\nOutput will contain analogus, complimentary, triadic colors.\n\n```\n{\nanalogus: (2) [{…}, {…}]\ncomplementary: {hsl: \"hsl(19.5, 18.3%, 46.1%)\", hex: \"#8B6E60\", rgb: \"rgb(139, 110, 96)\"}\nprimary: {hsl: \"hsl(199.5, 18.3%, 46.1%)\", hex: \"#607D8B\", rgb: \"rgb(96, 125, 139)\"}\ntriadic: (2) [{…}, {…}]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglook%2Fpalette-creator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglook%2Fpalette-creator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglook%2Fpalette-creator/lists"}