Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/k37z3r/ral-tones-to-css

a list of color tones and the corresponding HEX RGB HSL HWB CMYK NCOL XYZ L*a*b* xyY LCh HTML/CSS Colorname
https://github.com/k37z3r/ral-tones-to-css

cmyk css hex hsl hsv hwb jbase jquery jquery-plugin js lab lch ncol ral rgb xyy xyz

Last synced: 18 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/k37z3r/ral-tones-to-css
Owner: k37z3r
License: other
Created: 2024-08-16T14:33:31.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-08-20T06:52:29.000Z (3 months ago)
Last Synced: 2024-10-10T13:20:17.413Z (about 1 month ago)
Topics: cmyk, css, hex, hsl, hsv, hwb, jbase, jquery, jquery-plugin, js, lab, lch, ncol, ral, rgb, xyy, xyz
Language: CSS
Homepage:
Size: 777 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

        # RAL-Tones-to-CSS

![GitHub Created At](https://img.shields.io/github/created-at/k37z3r/RAL-Tones-to-CSS)

![GitHub Last Commit](https://img.shields.io/github/last-commit/k37z3r/RAL-Tones-to-CSS)

![GitHub language count](https://img.shields.io/github/languages/count/k37z3r/RAL-Tones-to-CSS)

![GitHub top language](https://img.shields.io/github/languages/top/k37z3r/RAL-Tones-to-CSS)

![GitHub repo size](https://img.shields.io/github/repo-size/k37z3r/RAL-Tones-to-CSS)  

![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hd/k37z3r/RAL-Tones-to-CSS)

![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hw/k37z3r/RAL-Tones-to-CSS)

![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hm/k37z3r/RAL-Tones-to-CSS)

![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hy/k37z3r/RAL-Tones-to-CSS)

![GitHub Repo stars](https://img.shields.io/github/stars/k37z3r/RAL-Tones-to-CSS?label=Repo-Stars)

![GitHub User's stars](https://img.shields.io/github/stars/k37z3r?label=my%20Stars)

a list of color tones and the corresponding HEX RGB HSL HWB HSV CMYK NCOL XYZ L*a*b* 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](csv) / [html](html) / [css](css) / [json](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

> ```html

> 

> ```

> now you can use it like:

> ```js

> 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

```css

@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

```css

@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](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

```css

@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

```css

span{

  background-color: var(--ral9005);

  color: var(--ral3033);

}

```

## howto use with js

* execute the first steps ([howto use at CSS](?plain=0#howto-use-at-css))

use pure js

```js

const ral2008 = getComputedStyle(document.documentElement).getPropertyValue("--ral2008");

document.getElementById('myDiv');

myDiv.style.backgroundColor = ral2008;

```

**OR**

use [jBase](https://github.com/k37z3r/jBase)

```js

$(document).ready(function() {

  $('#myDiv').css('background-color', getComputedStyle(document.documentElement).getPropertyValue('--ral2008'));

});

```

**OR**

use jquery

```js

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

* download [css/ral-tones.min.css](css/ral-tones.min.css)

* download [css/classes/all-ral-tones.min.css](css/classes/all-ral-tones.min.css)

* put the downloaded files into {your-css-dir}

* open your html-file and add between `````` and ``````

```html

 

 

```

otherwise

* download [css/ral-tones.min.css](css/ral-tones.min.css)

* download [css/classes/ac-ral-tones.min.css](css/classes/ac-ral-tones.min.css)

* download [css/classes/bbc-ral-tones.min.css](css/classes/bbc-ral-tones.min.css)

* download [css/classes/bc-ral-tones.min.css](css/classes/bc-ral-tones.min.css)

* download [css/classes/bg-ral-tones.min.css](css/classes/bg-ral-tones.min.css)

* download [css/classes/blc-ral-tones.min.css](css/classes/blc-ral-tones.min.css)

* download [css/classes/brc-ral-tones.min.css](css/classes/brc-ral-tones.min.css)

* download [css/classes/btc-ral-tones.min.css](css/classes/btc-ral-tones.min.css)

* download [css/classes/c-ral-tones.min.css](css/classes/c-ral-tones.min.css)

* download [css/classes/cc-ral-tones.min.css](css/classes/cc-ral-tones.min.css)

* download [css/classes/oc-ral-tones.min.css](css/classes/oc-ral-tones.min.css)

* put the downloaded files into {your-css-dir}

* open your html-file and add between `````` and ``````

```html

 

 

 

 

 

 

 

 

 

 

 

```

now you can use the ral tones at your css file for define background-color or text-color by using classes

```html

this div has the background color ral2008

```

**OR**

```html

this div has the text color ral2008

```

**OR**

```html

this div has a border with color ral2008

```

**OR**

```html

this div has a border with color ral2008

```

**OR**

```html

this div has a left border with color ral2008

```

**OR**

```html

this div has a top border with color ral2008

```

**OR**

```html

this div has a right border with color ral2008

```

**OR**

```html

this div has a bottom border with color ral2008

```

**OR**

```html

```

**OR**

```html

```

**OR**

you can also combine the classes like

```html

this div has the text color ral7021 and background color ral1012

```

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