Rainbow9 (R9) is a javascript library to do operations with colors, e.g. parsing between color spaces; generating harmony, shades and more.
Rainbow9 (R9) is a javascript library to do operations with colors, e.g. parsing between color spaces; generating harmony, shades and more.
You can download the library and host it or you can use it through jsDelivr.
Add the following line to the your html:
<script src="https://cdn.jsdelivr.net/gh/hms-douglas/rainbow9@1.1.0/dist/r9.min.js"></script>
Download the file here.
These are the color types and formats accepted.
All color types accept alpha channel, which can be on range 0 to 1 or 0 to 255. To include the alpha channel on the color input, add the "a" to the string format. Not all features of the library uses the alpha channel. In these cases, the alpha will be ignored (or set to maximum).
| Space | String format | Array format | R9 constant | Details | Since |
|---|---|---|---|---|---|
| RGB | "rgb(255, 255, 255)" or "rgba(255, 255, 255, 0.9)" |
[255, 255, 255] or [255, 255, 255, 0.9] |
TYPE.RGB | Values go from 0 to 255. | |
| HEX | "#FFFFFF" or "#FFFFFFFF" |
- | TYPE.HEX | - | |
| CMYK | "cmyk(100%, 100%, 100%, 100%)" or "cmyka(100%, 100%, 100%, 100%, 0.9)" |
[100, 100, 100, 100] or [100, 100, 100, 100, 0.9] |
TYPE.CMYK | Values go from 0 to 100. Symbols are not required. | |
| HSL | "hls(360º, 100%, 100%)" or "hlsa(360°, 100%, 100%, 0.9)" |
[360, 100, 100] or [360, 100, 100, 0.9] |
TYPE.HSL | First value (hue) goes from 0 to 360. The others go from 0 to 100. Symbols are not required, but accepted. | |
| HSV | "hlv(360º, 100%, 100%)" or "hlva(360°, 100%, 100%, 0.9)" |
[360, 100, 100] or [360, 100, 100, 0.9] |
TYPE.HSV | First value (hue) goes from 0 to 360. The others go from 0 to 100. Symbols are not required, but accepted. | |
| Lab | "Lab(100, 0, 0)" or "Laba(100, 0, 0, 0.9)" |
[100, 0, 0] or [100, 0, 0, 0.9] |
TYPE.LAB | First value (lightness) goes from 0 to 100. The others go from -128 to 127. | |
| - | - | - | TYPE.TO_ALL | Accepted only as a output format ("toType"). Will return the color in all formats listed above. |
Converts a color from one color space to another.
Options must be passed as an object literal.
| Key | Description | Type | Default | Details | Since |
|---|---|---|---|---|---|
| string | Whether the output color will be in string or array format. | Boolean | false | HEX color will always be returned in a string format! | |
| symbols | Whether the output color in string format will contains symbols like "%", "#" and/or "°". | Boolean | true | ||
| alpha | The range for the alpha channel. | Integer | 0 | If set to 1 will return the alpha channel between 0 and 1, if set for 2 between 0 and 2, and so on. | |
| decimal | The max amount of decimal places. | Integer | - | By default it will return the color value with all the decimals from the calculations. |
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. If an array is passed it will be treated as RGB. |
| toType | String or R9 type constant | Yes | The color space at which the color will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.parseColor("#FFFFFF", R9.TYPE.RGB);
//Returns: [255, 255, 255]
R9.parseColor("rgba(124, 154, 219, 215)", R9.TYPE.HSL, {"alpha" : 1, "decimal" : 3});
//Returns: [221, 57, 67, 0.843]
R9.parseColor("#44599CFF", R9.TYPE.HSL, {"alpha" : 255, "decimal" : 3, "string" : true});
//Returns: 'hsl(226°, 39%, 44%, 255)'
R9.parseColor("#44599CFF", R9.TYPE.TO_ALL, {"alpha" : 1, "decimal" : 3, "string" : true, "symbols" : false});
/*
Returns:
{
Lab : "Lab(26.07, 36.089, -60.374, 1)"
cmyk : "cmyk(56, 43, 0, 39, 1)"
hex : "44599CFF"
hsl : "hsl(226, 39, 44, 1)"
hsv : "hsv(226, 56, 61, 1)"
rgb : "rgb(68, 89, 156, 1)"
}
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in an array format. |
| fromType | String or R9 type constant | Yes | The color space that corresponds to the array passed. In other words, the color type of the input. |
| toType | String or R9 type constant | Yes | The color space at which the color will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.parseColorArray([255, 0, 255, 215], R9.TYPE.RGB, R9.TYPE.HEX);
//Returns: '#FF00FF'
R9.parseColorArray([221, 57, 67, 0.843], R9.TYPE.HSL, R9.TYPE.RGB, {"alpha" : 1, "decimal" : 3});
//Returns: [122.9, 152.9, 218.8, 0.843]
R9.parseColorArray([301, 94, 38], R9.TYPE.HSV, R9.TYPE.TO_ALL, {"decimal" : 0});
/*
Returns:
{
Lab : [9, 27, -17]
cmyk : [0, 94, 2, 62]
hex : "#61065F"
hsl : [301, 89, 20]
hsv : [301, 94, 38]
rgb : [97, 6, 95]
}
*/
These are the color schemes accepted.
| Scheme | R9 constant | Number of colors generated | Details | Since |
|---|---|---|---|---|
| Complementary | SCHEME.COMPLEMENTARY | 1 | - | |
| Split complementary | SCHEME.SPLIT_COMPLEMENTARY | 2 | - | |
| Triadic | SCHEME.TRIADIC | 2 | - | |
| Tetradic | SCHEME.TETRADIC | 3 | - | |
| Square | SCHEME.SQUARE | 3 | - | |
| Analogous | SCHEME.ANALOGOUS | 2 | - | |
| Monochromatic | SCHEME.MONOCHROMATIC | 1 | - | |
| - | SCHEME.TO_ALL | - | Will return an object with all schemes listed above. |
Includes all options from parsing plus the ones listed bellow. Options must be passed as an object literal.
| Key | Description | Type | Default | Details | Since |
|---|---|---|---|---|---|
| includeColor | Whether the output will include the color used as reference. In case true, it will be always the first color of the array. | Boolean | false | - |
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. |
| toScheme | String or R9 scheme constant | Yes | The scheme that will be applyed to the color. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.harmonyForColor("#FF0000", R9.SCHEME.COMPLEMENTARY, R9.TYPE.RGB);
//Returns: [[0, 254, 255]]
R9.harmonyForColor("cmyk(50, 15, 12, 36)", R9.SCHEME.TRIADIC, R9.TYPE.HEX, {"includeColor" : true, "symbols" : false});
//Returns: ['518A90', '90518A', '8A9051']
R9.harmonyForColor("cmyk(50, 15, 12, 36)", R9.SCHEME.TRIADIC, R9.TYPE.CMYK);
//Returns: [[0, 44, 4, 44], [4, 0, 44, 44]]
R9.harmonyForColor("#7ba644", R9.SCHEME.TO_ALL, R9.TYPE.RGB);
/*
Returns:
{
analogous : [[166.6, 160, 68], [74.4, 166.6, 68]],
complementary : [[110.5, 68, 166.6]],
monochromatic : [[148.9, 189.9, 95.7]],
splitComplementary : [[68, 74.2, 166.6], [159.8, 68, 166.6]],
square : [[68, 166.6, 160.2], [110.5, 68, 166.6], [166.6, 68, 74]],
tetradic : [[68, 123.5, 166.6], [110.5, 68, 166.6], [166.6, 110.7, 68]],
triadic : [[68, 123.5, 166.6], [166.6, 68, 123.3]]
}
*/
R9.harmonyForColor("#7ba644", R9.SCHEME.TO_ALL, R9.TYPE.RGB, {"string" : true});
/*
Returns:
{
analogous : ['rgb(166.6, 160, 68)', 'rgb(74.4, 166.6, 68)'],
complementary : ['rgb(110.5, 68, 166.6)'],
monochromatic : ['rgb(148.9, 189.9, 95.7)'],
splitComplementary : ['rgb(68, 74.2, 166.6)', 'rgb(159.8, 68, 166.6)'],
square : ['rgb(68, 166.6, 160.2)', 'rgb(110.5, 68, 166.6)', 'rgb(166.6, 68, 74)'],
tetradic : ['rgb(68, 123.5, 166.6)', 'rgb(110.5, 68, 166.6)', 'rgb(166.6, 110.7, 68)'],
triadic : ['rgb(68, 123.5, 166.6)', 'rgb(166.6, 68, 123.3)']
}
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. |
| toScheme | String or R9 scheme constant | Yes | The scheme that will be applyed to the color. |
| fromType | String or R9 type constant | Yes | The color space that corresponds to the array passed. In other words, the color type of the input. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.harmonyForColor("#7ba644", R9.SCHEME.TO_ALL, R9.TYPE.RGB, {"string" : true});
/*
Returns:
{
"complementary" : [
{
"rgb":"rgb(110.5, 68, 166.6)",
"cmyk":"cmyk(34%, 59%, 0%, 35%)",
"hsl":"hsl(266°, 42%, 46%)",
"hsv":"hsv(266°, 59%, 65%)",
"Lab":"Lab(33.13257923745171, 53.326019351317974, -54.952583849914774)","hex":"#6F44A7"
}
], "splitComplementary" : [
{
"rgb":"rgb(68, 74.2, 166.6)",
"cmyk":"cmyk(59%, 55%, 0%, 35%)",
"hsl":"hsl(236°, 42%, 46%)",
"hsv":"hsv(236°, 59%, 65%)",
"Lab":"Lab(26.227029734645875, 42.38657770984911, -66.55414379630598)",
"hex":"#444AA7"
}, {
"rgb":"rgb(159.8, 68, 166.6)",
"cmyk":"cmyk(4%, 59%, 0%, 35%)",
"hsl":"hsl(296°, 42%, 46%)",
"hsv":"hsv(296°, 59%, 65%)",
"Lab":"Lab(40.744688391277606, 63.02105553203482, -42.29550508896743)",
"hex":"#A044A7"
}
], "triadic" : [
{
"rgb":"rgb(68, 123.5, 166.6)",
"cmyk":"cmyk(59%, 26%, 0%, 35%)",
"hsl":"hsl(206°, 42%, 46%)",
"hsv":"hsv(206°, 59%, 65%)",
"Lab":"Lab(48.8895164226454, -9.896470165395355, -30.09844454807147)",
"hex":"#447CA7"
}, {
"rgb":"rgb(166.6, 68, 123.3)",
"cmyk":"cmyk(0%, 59%, 26%, 35%)",
"hsl":"hsl(326°, 42%, 46%)",
"hsv":"hsv(326°, 59%, 65%)",
"Lab":"Lab(39.728244976107554, 58.09978147051012, -17.437266116573248)",
"hex":"#A7447B"
}
], "tetradic" : [
{
"rgb":"rgb(68, 123.5, 166.6)",
"cmyk":"cmyk(59%, 26%, 0%, 35%)",
"hsl":"hsl(206°, 42%, 46%)",
"hsv":"hsv(206°, 59%, 65%)",
"Lab":"Lab(48.8895164226454, -9.896470165395355, -30.09844454807147)",
"hex":"#447CA7"
}, {
"rgb":"rgb(110.5, 68, 166.6)",
"cmyk":"cmyk(34%, 59%, 0%, 35%)",
"hsl":"hsl(266°, 42%, 46%)",
"hsv":"hsv(266°, 59%, 65%)",
"Lab":"Lab(33.13257923745171, 53.326019351317974, -54.952583849914774)",
"hex":"#6F44A7"
}, {
"rgb":"rgb(166.6, 110.7, 68)",
"cmyk":"cmyk(0%, 34%, 59%, 35%)",
"hsl":"hsl(26°, 42%, 46%)",
"hsv":"hsv(26°, 59%, 65%)",
"Lab":"Lab(51.41414559664679, 15.854967388661878, 46.62535290861366)",
"hex":"#A76F44"
}
], "analogous" : [
{
"rgb":"rgb(166.6, 160, 68)",
"cmyk":"cmyk(0%, 4%, 59%, 35%)",
"hsl":"hsl(56°, 42%, 46%)",
"hsv":"hsv(56°, 59%, 65%)",
"Lab":"Lab(64.53758905865509, -11.31328059344372, 59.1282420615879)",
"hex":"#A7A044"
}, {
"rgb":"rgb(74.4, 166.6, 68)",
"cmyk":"cmyk(55%, 0%, 59%, 35%)",
"hsl":"hsl(116°, 42%, 46%)","hsv":
"hsv(116°, 59%, 65%)",
"Lab":"Lab(59.999355615413464, -57.0675614045939, 52.5069456598751)",
"hex":"#4AA744"
}
], "monochromatic" : [
{
"rgb":"rgb(148.9, 189.9, 95.7)",
"cmyk":"cmyk(22%, 0%, 50%, 26%)",
"hsl":"hsl(86°, 42%, 56%)",
"hsv":"hsv(86°, 50%, 74%)",
"Lab":"Lab(71.81119356693466, -33.22424722384532, 62.76778414784897)",
"hex":"#95BE60"
}
], "square" : [
{
"rgb":"rgb(68, 166.6, 160.2)",
"cmyk":"cmyk(59%, 0%, 4%, 35%)",
"hsl":"hsl(176°, 42%, 46%)",
"hsv":"hsv(176°, 59%, 65%)",
"Lab":"Lab(62.06305463824644, -34.399949719268854, -6.3725445490937505)",
"hex":"#44A7A0"
}, {
"rgb":"rgb(110.5, 68, 166.6)",
"cmyk":"cmyk(34%, 59%, 0%, 35%)",
"hsl":"hsl(266°, 42%, 46%)",
"hsv":"hsv(266°, 59%, 65%)",
"Lab":"Lab(33.13257923745171, 53.326019351317974, -54.952583849914774)",
"hex":"#6F44A7"
}, {
"rgb":"rgb(166.6, 68, 74)",
"cmyk":"cmyk(0%, 59%, 56%, 35%)",
"hsl":"hsl(356°, 42%, 46%)",
"hsv":"hsv(356°, 59%, 65%)",
"Lab":"Lab(37.50488400761171, 51.074651922639546, 31.023190215375294)",
"hex":"#A7444A"
}
]
}
*/
Includes all options from parsing plus the ones listed bellow. Options must be passed as an object literal.
| Key | Description | Type | Default | Details | Since |
|---|---|---|---|---|---|
| amount | The number of colors that will be generated. | Integer | 10 | - |
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.shadesForColor("#FF0000", R9.TYPE.HEX);
//Returns: ['#FF0000', '#E30000', '#C60000', '#AA0000', '#8E0000', '#710000', '#550000', '#390000', '#1C0000', '#000000']
R9.shadesForColor("rgb(255, 100, 20)", R9.TYPE.HSV, {"alpha" : 255});
/*
Returns:
[
[20, 92, 100, 255],
[20, 100, 96, 255],
[20, 100, 84, 255],
[20, 100, 72, 255],
[20, 100, 60, 255],
[20, 100, 48, 255],
[20, 100, 36, 255],
[20, 100, 24, 255],
[20, 100, 12, 255],
[0, 0, 0, 255]
]
*/
R9.shadesForColor("rgb(255, 100, 20)", R9.TYPE.RGB, {"amount" : 5, "string" : true});
/*
Returns:
[
'rgb(255, 98.6, 20.4)',
'rgb(206.6, 68.9, 0)',
'rgb(137.7, 45.9, 0)',
'rgb(68.9, 22.9, 0)',
'rgb(0, 0, 0)'
]
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in an array format. |
| fromType | String or R9 type constant | Yes | The color space that corresponds to the array passed. In other words, the color type of the input. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.shadesForColorArray([255, 100, 20], R9.TYPE.RGB, R9.TYPE.RGB, {"amount" : 5, "string" : true});
/*
Returns:
[
'rgb(255, 98.6, 20.4)',
'rgb(206.6, 68.9, 0)',
'rgb(137.7, 45.9, 0)',
'rgb(68.9, 22.9, 0)',
'rgb(0, 0, 0)'
]
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.tintsForColor("#FF0000", R9.TYPE.HEX);
//Returns: ['#FF0000', '#FF1C1C', '#FF3939', '#FF5555', '#FF7171', '#FF8E8E', '#FFAAAA', '#FFC6C6', '#FFE3E3', '#FFFFFF']
R9.shadesForColor("rgb(255, 100, 20)", R9.TYPE.HSV, {"alpha" : 255});
/*
Returns:
[
[20, 100, 92, 255],
[20, 98, 100, 255],
[20, 88, 100, 255],
[20, 77, 100, 255],
[20, 67, 100, 255],
[20, 57, 100, 255],
[20, 47, 100, 255],
[20, 36, 100, 255],
[20, 26, 100, 255]
[0, 0, 100, 255]
]
*/
R9.tintsForColor("rgb(255, 100, 20)", R9.TYPE.RGB, {"amount" : 5, "string" : true});
/*
Returns:
[
'rgb(234.6, 78.2, 0)',
'rgb(255, 110.5, 38.2)',
'rgb(255, 149.6, 96.9)',
'rgb(255, 188.7, 155.6)',
'rgb(255, 255, 255)'
]
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in an array format. |
| fromType | String or R9 type constant | Yes | The color space that corresponds to the array passed. In other words, the color type of the input. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.tintsForColorArray([255, 100, 20], R9.TYPE.RGB, R9.TYPE.RGB, {"amount" : 5, "string" : true});
/*
Returns:
[
'rgb(234.6, 78.2, 0)',
'rgb(255, 110.5, 38.2)',
'rgb(255, 149.6, 96.9)',
'rgb(255, 188.7, 155.6)',
'rgb(255, 255, 255)'
]
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in a string format. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.tonesForColor("#FF0000", R9.TYPE.HEX);
//Returns: '#FF0000', '#F10E0E', '#E31C1C', '#D52B2B', '#C63939', '#B84747', '#AA5555', '#9C6363', '#8E7171', '#808080'
R9.tonesForColor("rgb(255, 100, 20)", R9.TYPE.HSV, {"alpha" : 255});
/*
Returns:
[
[20,92,100,255],
[20,86,95,255],
[20,80,90,255],
[20,72,85,255],
[20,64,80,255],
[20,55,74,255],
[20,44,69,255],
[20,32,64,255],
[20,17,59,255],
[0,0,50,255]
]
*/
R9.tonesForColor("rgb(255, 100, 20)", R9.TYPE.RGB, {"amount" : 5, "string" : true});
/*
Returns:
[
'rgb(255, 98.6, 20.4)',
'rgb(225.7, 108.4, 49.7)',
'rgb(196.3, 118.2, 79.1)',
'rgb(167, 127.9, 108.4)',
'rgb(128, 128, 128)'
]
*/
| Name | Type | Required | Description |
|---|---|---|---|
| color | String | Yes | The color in an array format. |
| fromType | String or R9 type constant | Yes | The color space that corresponds to the array passed. In other words, the color type of the input. |
| toType | String or R9 type constant | Yes | The color space at which the color genereated will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.tonesForColorArray([255, 100, 20], R9.TYPE.RGB, R9.TYPE.TO_ALL, {"amount" : 4, "string" : true, "decimal" : 0, "symbols" : false});
/*
Returns:
[
{
"rgb":"rgb(255, 99, 20)",
"cmyk":"cmyk(0, 61, 92, 0)",
"hsl":"hsl(20, 100, 54)",
"hsv":"hsv(20, 92, 100)",
"Lab":"Lab(56, 74, 64)",
"hex":"FF6314"
}, {
"rgb":"rgb(216, 112, 60)",
"cmyk":"cmyk(0, 48, 72, 15)",
"hsl":"hsl(20, 67, 54)",
"hsv":"hsv(20, 72, 85)",
"Lab":"Lab(58, 36, 57)",
"hex":"D8703C"
}, {
"rgb":"rgb(177, 125, 99)",
"cmyk":"cmyk(0, 29, 44, 31)",
"hsl":"hsl(20, 33, 54)",
"hsv":"hsv(20, 44, 69)",
"Lab":"Lab(56, 13, 48)",
"hex":"B17D63"
}, {
"rgb":"rgb(128, 128, 128)",
"cmyk":"cmyk(0, 0, 0, 50)",
"hsl":"hsl(0, 0, 50)",
"hsv":"hsv(0, 0, 50)",
"Lab":"Lab(54, 0, 0)",
"hex":"808080"
}
]
*/
These are the WCAG levels of constrast ratio for text accepted.
For more information check WCAG 2.1 Accessibility guide.
| Level | R9 constant | Details | Since |
|---|---|---|---|
| Large text (WCAG AA) | WCAG.AA_LARGE | If contrast ratio is less than 0.3333... for large text in AA-level. | |
| Normal text (WCAG AA) | WCAG.AA_NORMAL | If contrast ratio is less than 0.2222... for large text in AAA-level. | |
| Large text (WCAG AAA) | WCAG.AAA_LARGE | If contrast ratio is less than 0.2222... for small text in AA-level. | |
| Normal text (WCAG AAA) | WCAG.AAA_NORMAL | If contrast ratio is less than 0.142857... for small text in AAA-level. |
Compares the constrast ratio between two colors.
| Name | Type | Required | Description |
|---|---|---|---|
| color1 | String | Yes | First color in a string format. |
| color2 | String | Yes | Second color in a string format. |
| wcag | String or R9 wcag constant | No | If this paremeter is not set the value returned is a number between 0 and 1 corresponding to the constrast ratio between the colors. If this parameter is set, the return is a boolean informing whether the contrast meets the wcag requirements. |
R9.constrastRatio("#FFFFFF", "#000");
//Returns: 0.047619047619047616
R9.constrastRatio("#FFFFFF", "rgb(255,255,255)");
//Returns: 1
R9.constrastRatio("#665FB2", "#B5DF68", R9.WCAG.AA_LARGE);
//Returns: true
R9.constrastRatio("#665FB2", "#B5DF68", R9.WCAG.AAA_NORMAL);
//Returns: false
Compares the constrast ratio between two colors.
| Name | Type | Required | Description |
|---|---|---|---|
| color1 | Object | Yes | First color in a array format. |
| color2 | Object | Yes | Second color in a array format. |
| color1Type | String or R9 type constant | Yes | The color space that corresponds to the first array passed. In other words, the color type of the first input. |
| color2Type | String or R9 type constant | Yes | The color space that corresponds to the second array passed. In other words, the color type of the second input. |
| wcag | String or R9 wcag constant | No | If this paremeter is not set the value returned is a number between 0 and 1 corresponding to the constrast ratio between the colors. If this parameter is set, the return is a boolean informing whether the contrast meets the wcag requirements. |
R9.constrastRatioArray([255,255,255], [0,0,0], R9.TYPE.RGB, R9.TYPE.RGB);
//Returns: 0.047619047619047616
R9.constrastRatioArray([255,255,255], [198, 78, 92], R9.TYPE.RGB, R9.TYPE.HSV);
//Returns: 0.42112226100858535
R9.constrastRatioArray([255,255,255], [0,0,0], R9.TYPE.RGB, R9.TYPE.RGB, R9.WCAG.AA_LARGE);
//Returns: true
| Name | Type | Required | Description |
|---|---|---|---|
| color1 | String | Yes | First color in a string format. |
| color2 | String | Yes | Second color in a string format. |
| toType | String or R9 type constant | Yes | The color space at which the color will be parsed to. |
| options | Object | No | Formatting options to the output color. |
R9.addColors("#1f4f99", "#ff361c", R9.TYPE.HEX);
//Returns: '#1F0011'
R9.addColors("#1f4f99", "rgb(255, 54, 28)", R9.TYPE.RGB, {"string" : true})
//Returns: 'rgb(30.6, 0, 16.8)'
| Name | Type | Required | Description |
|---|---|---|---|
| color1 | Object | Yes | First color in a array format. |
| color2 | Object | Yes | Second color in a array format. |
| color1Type | String or R9 type constant | Yes | The color space that corresponds to the first array passed. In other words, the color type of the first input. |
| color2Type | String or R9 type constant | Yes | The color space that corresponds to the second array passed. In other words, the color type of the second input. |
| options | Object | No | Formatting options to the output color. |
R9.addColorsArray([255, 230, 0], [3, 213, 255], R9.TYPE.RGB, R9.TYPE.RGB, R9.TYPE.HEX);
//Returns: '#03BD00'
R9.addColorsArray([255, 230, 0], [3, 213, 255], R9.TYPE.RGB, R9.TYPE.RGB, R9.TYPE.HSL, {"string" : true, "symbols" : false});
//Returns: 'hsl(119, 100, 37)'
| Name | Type | Required | Description |
|---|---|---|---|
| toType | String or R9 type constant | No | The color space at which the color will be parsed to. By default this parameter is set to TYPE.RBG |
| options | Object | No | Formatting options to the output color. This method also accepts the option "amount", corresponding to the amount of colors that will be generated (By default, this option is set to 1). |
R9.randomColor();
//Returns: [245, 79, 84] //Example
R9.randomColor(R9.TYPE.CMYK);
//Returns: [0, 18, 86, 11] //Example
R9.randomColor(R9.TYPE.HEX, {"amount" : 2});
//Returns: ['#2A5DBF', '#A3F07E'] //Example
R9.randomColor(R9.TYPE.RGB, {"string" : true, "alpha" : 255, "decimal" : 0, "amount" : 2});
//Returns: ['rgb(85, 48, 65, 255)', 'rgb(164, 13, 41, 154)'] //Example
The library contains an object called "Color" with 149 colors. These colors represent the default html colors in HEX format. They are:
R9.Color.black
//Returns: '#000000'
R9.Color.navajoWhite
//Returns: '#FFDEAD'
R9.Color.transparent //Since v1.1.0
//Returns: '#00000000'
R9.parseColor(R9.Color.white, R9.TYPE.RGB)
//Returns: [255, 255, 255]
R9.parseColor(R9.Color.red, R9.TYPE.RGB, {"string" : true})
//Returns: 'rgb(255, 0, 0)'
v1.1.0Latest
R9 Contants turned into objects;
"transparent" added to Color object;
Error while generating the harmony for split complementary scheme fixed.
v1.0.0
MIT License
Copyright (c) 2024 Douglas SilvaPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.