a list of color tones and the corresponding HEX RGB HSL HWB HSV CMYK NCOL XYZ Lab* xyY LCh HTML/CSS Colorname
The 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 / html / css / json folders. the data sets are identical and only adapted to the corresponding file format
Tip
write in head-section after jquery
<script src="https://cdn.jsdelivr.net/gh/k37z3r/RAL-Tones-to-CSS@main/js/ral-tones.min.js"></script>now you can use it like:
ral({properties: value}, colorspace (standard=hex), decimals (standard=0))
$(`#myDiv`).ral({color:"ral9021", backgroundColor:"ral4000", border: "1px solid ral1016"}); /* colorspace is hex */
$(`#myDiv`).ral({color:"ral9021", backgroundColor:"ral4000", border: "1px solid ral1016"}, "hsl"); /* colorspace is hsl */
$(`#myDiv`).ral({color:"ral9021", backgroundColor:"ral4000", border: "1px solid ral1016"}, "lab", 2); /* colorspace is lab with 2 decimals */- open your css
- write at the top of your file
@import url("https://cdn.statically.io/gh/k37z3r/RAL-Tones-to-CSS/main/css/ral-tones.min.css");OR
- open your css
- write at the top of your file
@import url("https://cdn.jsdelivr.net/gh/k37z3r/RAL-Tones-to-CSS@main/css/ral-tones.min.css");OR
- download css/ral-tones.min.css
- save ral-tones.min.css at the same dir as your css
- open your css
- write at the top of your css-file
@import url("ral-tones.min.css");now you can use the ral tones at your css file e.g. as background-color, background, color. write at your css code like
span{
background-color: var(--ral9005);
color: var(--ral3033);
}- execute the first steps (howto use at CSS)
use pure js
const ral2008 = getComputedStyle(document.documentElement).getPropertyValue("--ral2008");
document.getElementById('myDiv');
myDiv.style.backgroundColor = ral2008;OR
use jBase
$(document).ready(function() {
$('#myDiv').css('background-color', getComputedStyle(document.documentElement).getPropertyValue('--ral2008'));
});OR
use jquery
$(document).ready(function() {
$('#myDiv').css('background-color', getComputedStyle(document.documentElement).getPropertyValue('--ral2008'));
});if you need all 10 css-class-files
- download css/ral-tones.min.css
- download css/classes/all-ral-tones.min.css
- put the downloaded files into {your-css-dir}
- open your html-file and add between
<head>and</head>
<link rel="stylesheet" href="{your-css-dir}/ral-tones.min.css"> <!-- for ral-tones -->
<link rel="stylesheet" href="{your-css-dir}/all-ral-tones.min.css"> <!-- for all in one class file -->otherwise
- download css/ral-tones.min.css
- download css/classes/ac-ral-tones.min.css
- download css/classes/bbc-ral-tones.min.css
- download css/classes/bc-ral-tones.min.css
- download css/classes/bg-ral-tones.min.css
- download css/classes/blc-ral-tones.min.css
- download css/classes/brc-ral-tones.min.css
- download css/classes/btc-ral-tones.min.css
- download css/classes/c-ral-tones.min.css
- download css/classes/cc-ral-tones.min.css
- download css/classes/oc-ral-tones.min.css
- put the downloaded files into {your-css-dir}
- open your html-file and add between
<head>and</head>
<link rel="stylesheet" href="{your-css-dir}/ral-tones.min.css"> <!-- for ral-tones -->
<link rel="stylesheet" href="{your-css-dir}/ac-ral-tones.min.css"> <!-- for accent-color -->
<link rel="stylesheet" href="{your-css-dir}/bbc-ral-tones.min.css"> <!-- for border-bottom-color -->
<link rel="stylesheet" href="{your-css-dir}/bc-ral-tones.min.css"> <!-- for border-color -->
<link rel="stylesheet" href="{your-css-dir}/bg-ral-tones.min.css"> <!-- for background-color -->
<link rel="stylesheet" href="{your-css-dir}/blc-ral-tones.min.css"> <!-- for border-left-color -->
<link rel="stylesheet" href="{your-css-dir}/brc-ral-tones.min.css"> <!-- for border-right-color -->
<link rel="stylesheet" href="{your-css-dir}/btc-ral-tones.min.css"> <!-- for border-top-color -->
<link rel="stylesheet" href="{your-css-dir}/c-ral-tones.min.css"> <!-- for text-color -->
<link rel="stylesheet" href="{your-css-dir}/cc-ral-tones.min.css"> <!-- for caret-color -->
<link rel="stylesheet" href="{your-css-dir}/oc-ral-tones.min.css"> <!-- for outline-color -->now you can use the ral tones at your css file for define background-color or text-color by using classes
<div class="bgcolor2008">this div has the background color ral2008</div>OR
<div class="color2008">this div has the text color ral2008</div>OR
<div class="outlinecolor2008" style="outline-width:1px;outline-style:solid;">this div has a border with color ral2008</div>OR
<div class="bordercolor2008" style="border-width:1px;border-style:solid;">this div has a border with color ral2008</div>OR
<div class="borderleftcolor2008" style="border-left-width:1px;border-style:solid;">this div has a left border with color ral2008</div>OR
<div class="bordertopcolor2008" style="border-top-width:1px;border-style:solid;">this div has a top border with color ral2008</div>OR
<div class="borderrightcolor2008" style="border-right-width:1px;border-style:solid;">this div has a right border with color ral2008</div>OR
<div class="borderbottomcolor2008" style="border-bottom-width:1px;border-style:solid;">this div has a bottom border with color ral2008</div>OR
<input class="caretcolor2008"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="date"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="datetime-local"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="email"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="month"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="number"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="password"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="search"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="tel"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="time"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="url"><!-- this input has a caret-color ral2008 -->
<input class="caretcolor2008" type="week"><!-- this input has a caret-color ral2008 -->OR
<input class="accentcolor" type="checkbox"><!-- this input has a accent-color ral2008 -->
<input class="accentcolor" type="radio"><!-- this input has a accent-color ral2008 -->
<input class="accentcolor" type="range"><!-- this input has a accent-color ral2008 -->
<progress class="accentcolor"><!-- this input has a accent-color ral2008 -->OR you can also combine the classes like
<div class="color7021 bgcolor1012">this div has the text color ral7021 and background color ral1012</div>RAL-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.
RAL 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.
