{"id":22489315,"url":"https://github.com/meodai/fettepalette","last_synced_at":"2025-08-02T21:32:28.859Z","repository":{"id":43150538,"uuid":"409139331","full_name":"meodai/fettepalette","owner":"meodai","description":"Color ramp generator using curves within the HSV color model","archived":false,"fork":false,"pushed_at":"2024-05-02T22:33:48.000Z","size":351,"stargazers_count":165,"open_issues_count":5,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-12-04T02:10:59.233Z","etag":null,"topics":["color","colour","generative","generative-art","palette-generation"],"latest_commit_sha":null,"homepage":"https://meodai.github.io/fettepalette/","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/meodai.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":"2021-09-22T09:21:02.000Z","updated_at":"2024-11-19T06:53:05.000Z","dependencies_parsed_at":"2023-12-17T02:26:36.463Z","dependency_job_id":"dba1d7e6-b3a3-4354-9df9-734248a14215","html_url":"https://github.com/meodai/fettepalette","commit_stats":{"total_commits":96,"total_committers":3,"mean_commits":32.0,"dds":0.03125,"last_synced_commit":"381a3ebfa863528138418dec54d84c366421cae2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2Ffettepalette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2Ffettepalette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2Ffettepalette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meodai%2Ffettepalette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meodai","download_url":"https://codeload.github.com/meodai/fettepalette/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"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","colour","generative","generative-art","palette-generation"],"created_at":"2024-12-06T17:19:37.931Z","updated_at":"2024-12-06T17:21:51.904Z","avatar_url":"https://github.com/meodai.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1\u003e\u003ca href=\"https://meodai.github.io/fettepalette/\"\u003e\u003cimg width=\"533\" src=\"https://github.com/meodai/fettepalette/blob/main/fp.png\" alt=\"fette palette\" /\u003e\u003c/a\u003e\u003c/h1\u003e\n\nIntroducing FettePalette — a color palette generator that takes inspiration from the world of pixel art and illustration. Using curves and hue shifting within the HSV color model, the function creates beautiful and unique color palettes. Check out the [demo and docs](https://meodai.github.io/fettepalette/) and elevate your generative color game today!\"\n\n## Installation\n\nFettePalette is bundled as both UMD and ES on npm. Install it using npm:\n\n```js\nnpm install fettepalette\n```\n\nYou can then import FettePalette into your project:\n\n```js\n// CJS style\nlet generateRandomColorRamp = require(\"fettepalette\");\n\n// ES style: import individual methods\nimport { generateRandomColorRamp } from \"fettepalette\";\n```\n\n## Usage\n\n```js\nimport { generateRandomColorRamp } from 'fettepalette';\n\nfunction generateRandomColorRamp  ({\n  total:                10,    // total of base colors in the ramp\n\n  centerHue:            180,   // at what hue should the generation start at\n\n  hueCycle:             0.3,   // hsl spins how much should the hue change over\n                               // the curve, 0: not at all, 1: one full rainbow\n\n  offsetTint:           0.1,   // offset for the tints\n\n  offsetShade:          0.1,   // offset of the shades\n\n  curveMethod:         'arc',  // what method is used to draw the curve in the\n                               // HSV color model, also takes a function \n\n  curveAccent:          0,     // how accentuated is the curve\n                               // (depends heavily on curveMethod)\n\n  tintShadeHueShift:    0.1,   // defines how shifted the hue is\n                               // for the shades and the tints\n\n  offsetCurveModTint:  0.03,   // modifies the tint curve\n\n  offsetCurveModShade: 0.03,   // modifies the shade curve\n\n  minSaturationLight:  [0, 0], // defines the min saturation and light of all\n                               // the colors\n\n  maxSaturationLight:  [1, 1], // defines the max saturation and light of all\n                               // the colors\n  \n  colorModel:          'hsl',  // defines the color model of the returned colors\n                               // hsv and hsl are supported\n});\n```\n\n### generateRandomColorRamp(Options{})\n\nFunction returns an object containing 4 arrays:\n\n```js\n{\n    light: [], // tints\n    dark: [], // shades\n    base: [], // medium colors\n    all: [], // all colors\n }\n```\n\nEach array contains every color as an array of HSL coordinates `[h,s,l/b]` `[0…360,0…1,0…1]`\n\n#### Options\n\n- `total` int 3… → Amount of base colors.\n- `centerHue` float 0…1 → 0 Red, 180 Teal etc..\n- `hueCycle` float 0…1 → How much the color changes over the curve 0: not at all, 1: full rainbow\n- `offsetTint` float 0…1 → Tint curve difference\n- `offsetShade` float 0…1 → Shade curve difference\n- `curveAccent` float 0…1 → How pronounced should the curve be, depends a lot on the curve method\n- `tintShadeHueShift` float 0…1 → Shifts the colors for the shades and tints\n- `curveMethod` string 'lamé'|'arc'|'pow'|'powY'|'powX' → method used to generate the curve. It also takes a function `(Number(0…1)) =\u003e [x,y]`\n- `offsetCurveModTint` float 0…1 → amplifies the curveAccent of the tint colors\n- `offsetCurveModShade` float 0…1 → amplifies the curveAccent of the shade colors\n- `minSaturationLight` array [0…1, 0…1] → minium saturation and light of the generated colors\n- `maxSaturationLight` array [0…1, 0…1] → maximum saturation and light of the generated colors\n- `colorModel` string 'hsl'|'hsv' → defines the color model of the returned colors\nhsv might be easier to convert into something else.\n\n#### Saint Options\n\nTo make it easy to integrate with your favourite settings panel (dat.gui, tweakpane …), the script exports `generateRandomColorRampParams`, an object that contains default and saint options to feed to the main function.\n\n```js\n{\n  curveMethod: {\n    default: 'lamé',\n    props: { options: [\n      'lamé', 'arc', 'pow', 'powY', 'powX',\n      // or +/- standard easing functions \n      'linear', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'random'\n    ] },\n  },\n  curveAccent: {\n    default: 0,\n    props: { min: -0.095, max: 1, step: 0.001 },\n  },\n  total: {\n    default: 9,\n    props: { min: 3, max: 35, step: 1 },\n  },\n  centerHue: {\n    default: 0,\n    props: { min: 0, max: 360, step: 0.1 },\n  },\n  hueCycle: {\n    default: 0.3,\n    props: { min: -1.5, max: 1.5, step: 0.001 },\n  },\n  offsetTint: {\n    default: 0.01,\n    props: { min: 0, max: 0.4, step: 0.001 },\n  },\n  offsetShade: {\n    default: 0.01,\n    props: { min: 0, max: 0.4, step: 0.001 },\n  },\n  tintShadeHueShift: {\n    default: 0.01,\n    props: { min: 0, max: 1, step: 0.001 },\n  },\n  offsetCurveModTint: {\n    default: 0.03,\n    props: { min: 0, max: 0.4, step: 0.0001  },\n  },\n  offsetCurveModShade: {\n    default: 0.03,\n    props: { min: 0, max: 0.4, step: 0.0001  },\n  },\n  minSaturation: {\n    default: 0,\n    props: { min: 0, max: 1, step: 0.001  },\n  },\n  minLight: {\n    default: 0,\n    props: { min: 0, max: 1, step: 0.001  },\n  },\n  maxSaturation: {\n    default: 1,\n    props: { min: 0, max: 1, step: 0.001  },\n  },\n  maxLight: {\n    default: 1,\n    props: { min: 0, max: 1, step: 0.001  },\n  },\n}\n```\n\nIntegration with [tweakpane](https://cocopon.github.io/tweakpane/)\n\n```js\nimport { generateRandomColorRampParams } from \"fettepalette\";\n\nconst PARAMS = {};\n\nObject.keys(generateRandomColorRampParams).forEach((key) =\u003e {\n  const param = generateRandomColorRampParams[key];\n  PARAMS[key] = param.default;\n  pane.addInput(PARAMS, key, param.props);\n});\n```\n\n## Reading and Inspiration\n\n- Video: [Hue Shifting in Pixel Art](https://www.youtube.com/watch?v=PNtMAxYaGyg) by [Brandon James Greer](https://twitter.com/BJGpixel)\n- Article: [How to make your own color palettes](https://medium.com/@greggunn/how-to-make-your-own-color-palettes-712959fbf021) by [Greg Gunn](https://www.ggunn.com/)\n- Tweet: [Hue Shifting](https://twitter.com/ENDESGA/status/971690827482202112) by [ENDESGA](https://github.com/ENDESGA)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeodai%2Ffettepalette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeodai%2Ffettepalette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeodai%2Ffettepalette/lists"}