{"id":15107525,"url":"https://github.com/k37z3r/ral-tones-to-css","last_synced_at":"2026-02-01T01:05:10.135Z","repository":{"id":253457795,"uuid":"843447121","full_name":"k37z3r/RAL-Tones-to-CSS","owner":"k37z3r","description":"a list of color tones and the corresponding HEX RGB HSL HWB CMYK NCOL XYZ L*a*b* xyY LCh HTML/CSS Colorname","archived":false,"fork":false,"pushed_at":"2024-08-20T06:52:29.000Z","size":796,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-06T03:12:56.090Z","etag":null,"topics":["cmyk","css","hex","hsl","hsv","hwb","jbase","jquery","jquery-plugin","js","lab","lch","ncol","ral","rgb","xyy","xyz"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/k37z3r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"patreon":"sven_minio","custom":["https://www.paypal.com/donate/?hosted_button_id=PAE6M49YXLHUU"]}},"created_at":"2024-08-16T14:33:31.000Z","updated_at":"2024-08-20T06:52:32.000Z","dependencies_parsed_at":"2024-08-18T07:45:26.248Z","dependency_job_id":"51c1c729-56c0-48a4-9234-74889bcc7a68","html_url":"https://github.com/k37z3r/RAL-Tones-to-CSS","commit_stats":null,"previous_names":["k37z3r/ral-to-hex-rgb-hsl-hwb-cmyk-ncol-xyz-lab-xyy-lch-html-css-colorname","k37z3r/ral-tones-to-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/k37z3r/RAL-Tones-to-CSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k37z3r%2FRAL-Tones-to-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k37z3r%2FRAL-Tones-to-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k37z3r%2FRAL-Tones-to-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k37z3r%2FRAL-Tones-to-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k37z3r","download_url":"https://codeload.github.com/k37z3r/RAL-Tones-to-CSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k37z3r%2FRAL-Tones-to-CSS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259360800,"owners_count":22845819,"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":["cmyk","css","hex","hsl","hsv","hwb","jbase","jquery","jquery-plugin","js","lab","lch","ncol","ral","rgb","xyy","xyz"],"created_at":"2024-09-25T21:25:18.039Z","updated_at":"2026-02-01T01:05:10.095Z","avatar_url":"https://github.com/k37z3r.png","language":"CSS","funding_links":["https://patreon.com/sven_minio","https://www.paypal.com/donate/?hosted_button_id=PAE6M49YXLHUU"],"categories":[],"sub_categories":[],"readme":"# RAL-Tones-to-CSS\n![GitHub Created At](https://img.shields.io/github/created-at/k37z3r/RAL-Tones-to-CSS)\n![GitHub Last Commit](https://img.shields.io/github/last-commit/k37z3r/RAL-Tones-to-CSS)\n![GitHub language count](https://img.shields.io/github/languages/count/k37z3r/RAL-Tones-to-CSS)\n![GitHub top language](https://img.shields.io/github/languages/top/k37z3r/RAL-Tones-to-CSS)\n![GitHub repo size](https://img.shields.io/github/repo-size/k37z3r/RAL-Tones-to-CSS)  \n![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hd/k37z3r/RAL-Tones-to-CSS)\n![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hw/k37z3r/RAL-Tones-to-CSS)\n![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hm/k37z3r/RAL-Tones-to-CSS)\n![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hy/k37z3r/RAL-Tones-to-CSS)\n![GitHub Repo stars](https://img.shields.io/github/stars/k37z3r/RAL-Tones-to-CSS?label=Repo-Stars)\n![GitHub User's stars](https://img.shields.io/github/stars/k37z3r?label=my%20Stars)\n\n\na list of color tones and the corresponding HEX RGB HSL HWB HSV CMYK NCOL XYZ L*a*b* xyY LCh HTML/CSS Colorname\n\n## infos\nThe hex codes used in this Repo are only approximations of the RAL tones. you can look up which ral tones are supported in the [csv](csv) / [html](html) / [css](css) / [json](json) folders. the data sets are identical and only adapted to the corresponding file format\n\n\u003e [!TIP]\n\u003e ## the easiest way to use RAL-Tones-to-CSS is with my jquery-plugin\n\u003e write in head-section after jquery\n\u003e ```html\n\u003e \u003cscript src=\"https://cdn.jsdelivr.net/gh/k37z3r/RAL-Tones-to-CSS@main/js/ral-tones.min.js\"\u003e\u003c/script\u003e\n\u003e ```\n\u003e now you can use it like:\n\u003e ```js\n\u003e ral({properties: value}, colorspace (standard=hex), decimals (standard=0))\n\u003e \n\u003e $(`#myDiv`).ral({color:\"ral9021\", backgroundColor:\"ral4000\", border: \"1px solid ral1016\"}); /* colorspace is hex */\n\u003e $(`#myDiv`).ral({color:\"ral9021\", backgroundColor:\"ral4000\", border: \"1px solid ral1016\"}, \"hsl\"); /* colorspace is hsl */\n\u003e $(`#myDiv`).ral({color:\"ral9021\", backgroundColor:\"ral4000\", border: \"1px solid ral1016\"}, \"lab\", 2); /* colorspace is lab with 2 decimals */\n\u003e ```\n\n## howto use at CSS\n* open your css\n* write at the top of your file\n```css\n@import url(\"https://cdn.statically.io/gh/k37z3r/RAL-Tones-to-CSS/main/css/ral-tones.min.css\");\n```\n**OR**\n* open your css\n* write at the top of your file\n```css\n@import url(\"https://cdn.jsdelivr.net/gh/k37z3r/RAL-Tones-to-CSS@main/css/ral-tones.min.css\");\n```\n**OR**\n* download [css/ral-tones.min.css](css/ral-tones.min.css)\n* save ral-tones.min.css at the same dir as your css\n* open your css\n* write at the top of your css-file\n```css\n@import url(\"ral-tones.min.css\");\n```\n\n\nnow you can use the ral tones at your css file e.g. as background-color, background, color. write at your css code like\n```css\nspan{\n  background-color: var(--ral9005);\n  color: var(--ral3033);\n}\n```\n## howto use with js\n* execute the first steps ([howto use at CSS](?plain=0#howto-use-at-css))\n\nuse pure js\n```js\nconst ral2008 = getComputedStyle(document.documentElement).getPropertyValue(\"--ral2008\");\ndocument.getElementById('myDiv');\nmyDiv.style.backgroundColor = ral2008;\n```\n**OR**\n\nuse [jBase](https://github.com/k37z3r/jBase)\n```js\n$(document).ready(function() {\n  $('#myDiv').css('background-color', getComputedStyle(document.documentElement).getPropertyValue('--ral2008'));\n});\n```\n**OR**\n\nuse jquery\n```js\n$(document).ready(function() {\n  $('#myDiv').css('background-color', getComputedStyle(document.documentElement).getPropertyValue('--ral2008'));\n});\n```\n## howto use direct at HTML\nif you need all 10 css-class-files\n* download [css/ral-tones.min.css](css/ral-tones.min.css)\n* download [css/classes/all-ral-tones.min.css](css/classes/all-ral-tones.min.css)\n* put the downloaded files into {your-css-dir}\n* open your html-file and add between ```\u003chead\u003e``` and ```\u003c/head\u003e```\n```html\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/ral-tones.min.css\"\u003e \u003c!-- for ral-tones --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/all-ral-tones.min.css\"\u003e \u003c!-- for all in one class file --\u003e\n```\n\notherwise\n* download [css/ral-tones.min.css](css/ral-tones.min.css)\n* download [css/classes/ac-ral-tones.min.css](css/classes/ac-ral-tones.min.css)\n* download [css/classes/bbc-ral-tones.min.css](css/classes/bbc-ral-tones.min.css)\n* download [css/classes/bc-ral-tones.min.css](css/classes/bc-ral-tones.min.css)\n* download [css/classes/bg-ral-tones.min.css](css/classes/bg-ral-tones.min.css)\n* download [css/classes/blc-ral-tones.min.css](css/classes/blc-ral-tones.min.css)\n* download [css/classes/brc-ral-tones.min.css](css/classes/brc-ral-tones.min.css)\n* download [css/classes/btc-ral-tones.min.css](css/classes/btc-ral-tones.min.css)\n* download [css/classes/c-ral-tones.min.css](css/classes/c-ral-tones.min.css)\n* download [css/classes/cc-ral-tones.min.css](css/classes/cc-ral-tones.min.css)\n* download [css/classes/oc-ral-tones.min.css](css/classes/oc-ral-tones.min.css)\n* put the downloaded files into {your-css-dir}\n* open your html-file and add between ```\u003chead\u003e``` and ```\u003c/head\u003e```\n```html\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/ral-tones.min.css\"\u003e \u003c!-- for ral-tones --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/ac-ral-tones.min.css\"\u003e \u003c!-- for accent-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/bbc-ral-tones.min.css\"\u003e \u003c!-- for border-bottom-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/bc-ral-tones.min.css\"\u003e \u003c!-- for border-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/bg-ral-tones.min.css\"\u003e \u003c!-- for background-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/blc-ral-tones.min.css\"\u003e \u003c!-- for border-left-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/brc-ral-tones.min.css\"\u003e \u003c!-- for border-right-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/btc-ral-tones.min.css\"\u003e \u003c!-- for border-top-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/c-ral-tones.min.css\"\u003e \u003c!-- for text-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/cc-ral-tones.min.css\"\u003e \u003c!-- for caret-color --\u003e\n\u003clink rel=\"stylesheet\" href=\"{your-css-dir}/oc-ral-tones.min.css\"\u003e \u003c!-- for outline-color --\u003e\n```\n\nnow you can use the ral tones at your css file for define background-color or text-color by using classes\n```html\n\u003cdiv class=\"bgcolor2008\"\u003ethis div has the background color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"color2008\"\u003ethis div has the text color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"outlinecolor2008\" style=\"outline-width:1px;outline-style:solid;\"\u003ethis div has a border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"bordercolor2008\" style=\"border-width:1px;border-style:solid;\"\u003ethis div has a border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"borderleftcolor2008\" style=\"border-left-width:1px;border-style:solid;\"\u003ethis div has a left border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"bordertopcolor2008\" style=\"border-top-width:1px;border-style:solid;\"\u003ethis div has a top border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"borderrightcolor2008\" style=\"border-right-width:1px;border-style:solid;\"\u003ethis div has a right border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cdiv class=\"borderbottomcolor2008\" style=\"border-bottom-width:1px;border-style:solid;\"\u003ethis div has a bottom border with color ral2008\u003c/div\u003e\n```\n**OR**\n```html\n\u003cinput class=\"caretcolor2008\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"date\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"datetime-local\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"email\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"month\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"number\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"password\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"search\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"tel\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"time\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"url\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n\u003cinput class=\"caretcolor2008\" type=\"week\"\u003e\u003c!-- this input has a caret-color ral2008 --\u003e\n```\n**OR**\n```html\n\u003cinput class=\"accentcolor\" type=\"checkbox\"\u003e\u003c!-- this input has a accent-color ral2008 --\u003e\n\u003cinput class=\"accentcolor\" type=\"radio\"\u003e\u003c!-- this input has a accent-color ral2008 --\u003e\n\u003cinput class=\"accentcolor\" type=\"range\"\u003e\u003c!-- this input has a accent-color ral2008 --\u003e\n\u003cprogress class=\"accentcolor\"\u003e\u003c!-- this input has a accent-color ral2008 --\u003e\n```\n**OR**\nyou can also combine the classes like\n```html\n\u003cdiv class=\"color7021 bgcolor1012\"\u003ethis div has the text color ral7021 and background color ral1012\u003c/div\u003e\n```\n## licensing\nRAL-Tones-to-CSS © 2024 by Sven Minio is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/4.0/ This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. If others modify or adapt the material, they must license the modified material under identical terms.\n\n## other infos\nRAL tones are actually intended for solids, so it is not possible to display these tones correctly on a monitor. you can buy a color fan, color cards or other physical objects to compare RAL tones at https://www.ral-farben.de/. On this website you can also buy a fully digitized database of RAL tones as RGB values. I do not own this database, if there is a match to the official database of the company RAL gemeinnützige GmbH, this is solely due to my research, which I have done via Gemini, Google, ChatGPT and Wikipedia.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk37z3r%2Fral-tones-to-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk37z3r%2Fral-tones-to-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk37z3r%2Fral-tones-to-css/lists"}