{"id":17002702,"url":"https://github.com/thierryc/hues","last_synced_at":"2025-08-03T06:39:13.092Z","repository":{"id":57098106,"uuid":"302671710","full_name":"thierryc/hues","owner":"thierryc","description":"hues.js [HYOOZ]  is a very, very simple zero-dependency javascript (tiny) tested colour library built for accessibility, RGBa and HSLa manupulation.","archived":false,"fork":false,"pushed_at":"2020-12-14T22:43:40.000Z","size":238,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T20:06:11.182Z","etag":null,"topics":["a11y","a11y-testing","accessibility","accessibility-checker","accessibility-testing","color","color-contrast","colors","hues","luminance","wcag"],"latest_commit_sha":null,"homepage":"","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/thierryc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"thierryc"}},"created_at":"2020-10-09T14:51:52.000Z","updated_at":"2020-12-14T22:43:42.000Z","dependencies_parsed_at":"2022-08-20T18:10:28.424Z","dependency_job_id":null,"html_url":"https://github.com/thierryc/hues","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thierryc%2Fhues","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thierryc%2Fhues/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thierryc%2Fhues/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thierryc%2Fhues/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thierryc","download_url":"https://codeload.github.com/thierryc/hues/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244932109,"owners_count":20534093,"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":["a11y","a11y-testing","accessibility","accessibility-checker","accessibility-testing","color","color-contrast","colors","hues","luminance","wcag"],"created_at":"2024-10-14T04:28:46.345Z","updated_at":"2025-03-22T09:19:20.221Z","avatar_url":"https://github.com/thierryc.png","language":"JavaScript","readme":"# hues [HYOOZ] \n\nHues [HYOOZ] is a very simple __zero-dependency__ javascript (tiny) tested color library built for accessibility, RGBa and HSLa manupulation.\n\nColor Hues, Tints, Shades, and Tones, Hues is just another word for colors. 🙃\n\n## How to install\n\n```shell\n\nnpm install --save @ap.cx/hues\n\nor \n\nyarn add @ap.cx/hues\n\n```\n\n## How to use\n\n```js\n\nimport * as hues from \"@ap.cx/hues\";\n\n```\n\nor one by one ...\n\n```js\n\nimport str2rgba from \"@ap.cx/hues\";\n\n```\nor\n\n```js\n\nconst {\n  str2rgba,\n  rgba2hsla,\n  rgb2hsl,\n  hsla2rgba,\n  hsl2rgb,\n  rgba2hex,\n  rgb2hex,\n  contrast,\n  relativeLuminance,\n  aa,\n  aaa,\n} = require(\"@ap.cx/hues\");\n\n```\n\n## hues [HYOOZ] definition\n\nA color or shade of a color.\n\nHues is the property of colors that makes them distinct from each other, as determined by the dominant wavelength of light — The hue associated with the shortest wavelengths of the visible spectrum is violet.\n\n- the sea has a magical turquoise hue today\n\n- all the hues of the rainbow\n\nThis small lib is about RGBa and HSLa colors and Accessibility (AA, AAA).\n\n## Functions\n\n- [str2rgba](#str2rgba),\n- [rgba2hsla](#rgba2hsla),\n- [rgb2hsl](#rgb2hsl),\n- [hsla2rgba](#hsla2rgba),\n- [hsl2rgb](#hsl2rgb),\n- [rgba2hex](#rgba2hex),\n- [rgb2hex](#rgb2hex),\n- [contrast](#contrast),\n- [relativeLuminance](#relativeLuminance),\n- [aa](#aa),\n- [aaa](#aaa),\n- [hslaVector3](#hslaVector3)\n\n### SOON \n\n- is colors blind (soon)\n- closest accessible color (soon)\n- closest colors blind safe color (soon)\n\n\n\n## rgb2hex\n\n```js\n\nimport { rgb2hex } from \"@ap.cx/hues\";\n\nconst result = rgb2hex({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n});\n\nconsole.log(result);\n\n\u003e #ffffff\n\n```\n\n## rgba2hex\n\n```js\n\nimport { rgba2hex } from \"@ap.cx/hues\";\n\nconst result = rgba2hex({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n  a: 1.0\n});\n\nconsole.log(result);\n\n\u003e #ffffffff\n\n```\n\n## rgb2hsl\n\n```js\n\nimport { rgb2hsl } from \"@ap.cx/hues\";\n\nconst result = rgb2hsl({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n});\n\nconsole.log(result);\n\n\u003e {\n  h: 0,\n  s: 0,\n  l: 100,\n}\n\n```\n\nConvert {r, g, b } object to { h, s, l} object.\n\n## rgba2hsla\n\n```js\n\nimport { rgba2hsla } from \"@ap.cx/hues\";\n\nconst result = rgb2hsl({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n  a: 1.0\n});\n\nconsole.log(result);\n\n\u003e {\n  h: 0,\n  s: 0,\n  l: 100,\n  a: 1,\n}\n\n```\n\nConvert {r, g, b, a } object to { h, s, l, a } object.\n\n## relativeLuminance\n\n```js\n\nimport { relativeLuminance } from \"@ap.cx/hues\";\n\nconst result = relativeLuminance({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n  a: 1.0\n});\n\nconsole.log(result);\n\n\u003e 1\n\n```\n\nhttps://www.topster.net/relative-luminance/\n\n### WCAG definition of relative luminance\nThe relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.\n\nhttps://www.w3.org/WAI/GL/wiki/Relative_luminance\n\n## contrast (A11y Contrast)\n\nCompare 2 Relative Luminance and calculate the Accessibility ratio.\n\n| Text size          | Level AA     | Level AAA    |\n| :----------------- | -----------: | -----------: |\n| small text \u003c 18    |         4.5+ |           7+ |\n| large text \u003e= 18   |           3+ |         4.5+ |\n|                    |              |              |\n\n Minimum required contrast ratio values\n\n\n```js\n\nimport { contrast, relativeLuminance } from \"@ap.cx/hues\";\n\nconst relativeLuminance1 = relativeLuminance({\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n  a: 1.0\n});\n\nconst relativeLuminance2 = relativeLuminance({\n  r: 0.0,\n  g: 0.0,\n  b: 0.0,\n  a: 0.0\n});\n\nconst ratio = contrast(\n  relativeLuminance1,\n  relativeLuminance2,\n);\n\nconsole.log(ratio);\n\n\u003e 21\n\n```\n\n## aa\n\n```js\n\nimport { aa } from \"@ap.cx/hues\";\n\nconst isAA = aa(ratio); // contrat ratio\n\nconsole.log(isAA);\n\n\u003e true // or false\n\n```\n\n## aa\n\n```js\n\nimport { aa } from \"@ap.cx/hues\";\n\nconst isAAA = aa(ratio); // contrat ratio\n\nconsole.log(isAAA);\n\n\u003e true // or false\n\n```\n\n## str2rgba\n\n```js\n\nimport { str2rgba } from \"@ap.cx/hues\";\n\n```\n\nConvert css color string to an rgba object of float.\n\n```js\n\nconst result = str2rgba('#ffffffff')\n\nconsole.log(result);\n\n\u003e {\nr: 1.0,\ng: 1.0,\nb: 1.0,\na: 1.0,\n}\n\n```\n\n## hslaVector3\n\n```js\n\nimport { hslaVector3 } from \"@ap.cx/hues\";\n\n```\n\nchange hsl value.\n\n```js\n\nconst result = hslaVector3({ h: 0, s: 90, l: 90, a: 1 }, [0,0,1])\n\nconsole.log(result);\n\n\u003e { h: 0, s: 90, l: 91, a: 1 };\n\n```\n\n---\n\n## color-string\n\nIf you would like to use color string take a look to [https://github.com/Qix-/color-string](Qix-/color-string).\n\n---\n\n## What is Relative Luminance\n\nRelative luminance follows the photometric definition of luminance, but with the values normalized to 1 or 100 for a reference white.[1] Like the photometric definition, it is related to the luminous flux density in a particular direction, which is radiant flux density weighted by the luminosity function y(λ) of the CIE Standard Observer. The use of relative values is useful in systems where absolute reproduction is impractical. For example, in prepress for print media, the absolute luminance of light reflecting off the print depends on the illumination and therefore absolute reproduction cannot be assured.\n\n---\n\n## What is WCAG\n\nWeb Content Accessibility Guidelines(WCAG) is developed by W3C WAI (The World Wide Web Consortium Web Accessibility Initiative) with a goal of providing a single shared standard for web content accessibility. The WCAG documents explain how to make web content more accessible to people with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.\n\n\n\n## get code \n\n### https\n\n```shell\n\ngit clone https://github.com/thierryc/hues.git\n\n```\n\n### SSH\n\n```shell\n\ngit clone git@github.com:thierryc/hues.git\n\n```\n\n\n### gh (github official cli)\n\n```shell\n\ngh repo clone thierryc/hues\n\n```\n\n\n## npm publish --access public \n\n```txt\n📦  @ap.cx/hues@2.0.1\n=== Tarball Contents ===\n9.0kB  dist/hues.cjs.js\n8.8kB  dist/hues.esm.js\n10.0kB dist/hues.umd.js\n695B   package.json\n1.9kB  README.md\n=== Tarball Details ===\nname:          @ap.cx/hues\nversion:       2.0.1\npackage size:  5.6 kB\nunpacked size: 30.5 kB\nshasum:        36d55d09a0030aba49dc0146367e29970d652908\ntotal files:   5  \n```\n\n## License\n\n[MIT](LICENSE).\n","funding_links":["https://github.com/sponsors/thierryc"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthierryc%2Fhues","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthierryc%2Fhues","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthierryc%2Fhues/lists"}