Skip to content

Latest commit

 

History

History
191 lines (178 loc) · 9.76 KB

README.md

File metadata and controls

191 lines (178 loc) · 9.76 KB
Raw

RAL-Tones-to-CSS

GitHub Created At GitHub Last Commit GitHub language count GitHub top language GitHub repo size
jsDelivr hits (GitHub) jsDelivr hits (GitHub) jsDelivr hits (GitHub) jsDelivr hits (GitHub) GitHub Repo stars GitHub User's stars

a list of color tones and the corresponding HEX RGB HSL HWB HSV CMYK NCOL XYZ Lab* xyY LCh HTML/CSS Colorname

infos

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

the easiest way to use RAL-Tones-to-CSS is with my jquery-plugin

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 */

howto use at CSS

  • 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);
}

howto use with js

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'));
});

howto use direct at HTML

if you need all 10 css-class-files

<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

<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>

licensing

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.

other infos

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.