{"id":51985767,"url":"https://github.com/node-3d/qml-colorhelpers","last_synced_at":"2026-07-30T19:01:30.791Z","repository":{"id":272515877,"uuid":"912394987","full_name":"node-3d/qml-colorhelpers","owner":"node-3d","description":"Simple QML Color pickers","archived":false,"fork":false,"pushed_at":"2026-07-16T20:44:25.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-07-17T00:24:03.471Z","etag":null,"topics":["color-picker","qml","qt","qtquick"],"latest_commit_sha":null,"homepage":"https://github.com/node-3d/node-3d","language":"QML","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/node-3d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-05T13:09:33.000Z","updated_at":"2026-07-16T20:44:29.000Z","dependencies_parsed_at":"2025-03-11T03:42:08.729Z","dependency_job_id":"f18b3ebf-10b6-4422-a763-a84350b5d387","html_url":"https://github.com/node-3d/qml-colorhelpers","commit_stats":null,"previous_names":["node-3d/qml-colorhelpers-raub","node-3d/qml-colorhelpers"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/node-3d/qml-colorhelpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-3d","download_url":"https://codeload.github.com/node-3d/qml-colorhelpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36088336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-30T02:00:05.956Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-picker","qml","qt","qtquick"],"created_at":"2026-07-30T19:01:29.165Z","updated_at":"2026-07-30T19:01:30.690Z","avatar_url":"https://github.com/node-3d.png","language":"QML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Helpers for QML\n\nThis is a part of [Node3D](https://github.com/node-3d) project.\n\n[![NPM](https://badge.fury.io/js/@node-3d%2Fqml-colorhelpers.svg)](https://badge.fury.io/js/@node-3d%2Fqml-colorhelpers)\n\n```bash\nnpm install @node-3d/qml-colorhelpers\n```\n\n![Example](examples/screenshot.png)\n\nSimple HSV-oriented color pickers and colored rectangles for QML. The data flow is similar\nto React: app.color -\u003e picker.color -\u003e picker.signal -\u003e app.update -\u003e app.color. That is,\nunless the app accepts the color change, the picker.color will remain the same, and\nwill not override the input.\n\n\n### PickerHsv\n\nCombines `PickerSatVal` and `PickerHue`. The pickers will occupy the whole\nitem area. Use `widthHue` and `widthGap` to control how the area is distributed.\n\n```js\nPickerHsv {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 195\n\theight: 150\n\t\n\twidthHue: 30 // the default\n\twidthGap: 15 // the default\n\tcolor: app.color // \u003c-- must be from outside\n\tonValueChanged: value =\u003e {\n\t\tconsole.log(\"PickerHsv onValueChanged\", value);\n\t\tapp.color = value;\n\t}\n}\n```\n\n\n### PickerHue\n\nA vertical box to select color hue. The picker fills the whole item area.\n\n```js\nPickerHue {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 30\n\theight: 150\n\t\n\tcrossSize: 12 // the default\n\tcrossShape: \"boxFlat\" // the default, \n\thue: app.hue // \u003c-- must be from outside\n\tonValueChanged: value =\u003e {\n\t\tconsole.log(\"PickerHue onValueChanged\", value);\n\t\tapp.hue = value;\n\t}\n}\n```\n\n\n### PickerHue\n\nA gradient box to select color saturation and value.\nThe picker fills the whole item area.\n\n```js\nPickerSatVal {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 150\n\theight: 150\n\t\n\tcrossSize: 12 // the default\n\tcrossShape: \"circle\" // the default\n\tcolor: app.color // \u003c-- must be from outside\n\tonValueChanged: (sat, val) =\u003e {\n\t\tconsole.log(\"PickerSatVal onValueChanged\", sat, val);\n\t\tapp.color = Qt.hsva(color.hsvHue, sat, val, 1);\n\t}\n}\n```\n\n\n### ColorRect\n\nConvenient gradient Rectangle where you only need to provide the list of colors.\nThe colors will spread uniformly across the area.\n\n```js\nColorRect {\n\tcolors: [\"white\", \"black\"] // the default\n\torientation: Gradient.Vertical // the default\n}\n```\n\n\n### ColorRectHue\n\nSame as `ColorRect`, but prebuilt with hue color list.\n\n\n### ColorRectSatVal\n\nRuns 2 overlayed `ColorRect` items to emulate saturation-value\ncolor variations. Provide a hue value to set the base color.\n\n```js\nColorRectSatVal {\n\thue: 1 // the default\n}\n```\n\n\n### Crosshair\n\nVisual handle to show the current value on color pickers. It receives\nthe position coordinates `u, v` in percent, and positions to fit its center over that spot.\n\n```js\nCrosshair {\n\tshape: \"box\" // \"box\" \"boxFlat\" \"circle\" \"circleFlat\"\n\tu: 0 // 0.0 - 1.0 horizontal location\n\tv: 0 // 0.0 - 1.0 vertical location\n\tsize: 12 // the default\n\tcolor: \"white\" // the default\n}\n```\n\n\n### CrosshairRect\n\nA small helper to draw \"outlined\" rectangles for crosshairs.\n\n```js\nCrosshairRect {\n\tbaseW: 12 // the default\n\tbaseH: 12 // the default\n\tvalue: \"white\" // not \"color\" because this is in fact a Rectangle\n\tisRound: false // shape - rounded or not\n}\n```\n\n### MouseRect\n\nA `u, v` oriented mouse area. Meaning it will report coordinates in percents,\nranging from `0.0` to `1.0`. Good for sliders and 2D sliders (as in color pickers).\nHas optional margins, because slider knobs usually can go past the selection area, and\nshould still seem interactive.\n\n```js\nMouseArea {\n\tuMargin: 0 // the default\n\tvMargin: 0 // the default\n\tonUvChanged: (u, v) =\u003e {\n\t\tconsole.log(\"MouseArea onUvChanged\", sat, val);\n\t}\n```\n\n\n## Importing\n\nThe `./ColorHelpers` directory should be visible to QML engine for importing.\n\n```qml\nimport ColorHelpers\n```\n\n### C++ import path\n\n```cpp\nqmlEngine-\u003eaddImportPath(\"path to @node-3d/qml-colorhelpers\");\n```\n\n### Node.js @node-3d/qml\n\n```js\nimport { absPath } from '@node-3d/qml-colorhelpers';\n\nView.libs(absPath);\n```\n\n### Manual\n\nCopy this repo or even specifically the `./ColorHelpers` folder to wherever your QML is\nready to grab it. Or use this repo as a submodule if you wish.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2Fqml-colorhelpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-3d%2Fqml-colorhelpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2Fqml-colorhelpers/lists"}