hv-color v0.0.3

Transavia Colors

All colors of Transavia to use for different purposes.

File types

CSS

When the css file is imported, a set of custom properties can be used. The set includes also RGB and HSL colors

This is an example for the color Green, this set is available for all colors in the Transavia Set.

:root {
	--hv-Green: #00d66c;
	--hv-Green-hue: 150.2803738317757;
	--hv-Green-saturation: 100;
	--hv-Green-lightness: 41.96078431372549;
	--hv-Green-red: 0;
	--hv-Green-green: 214;
	--hv-Green-blue: 108;

	...;
}

JS

The js file can be imported as an object and includes the basic colors.

import { hex } as hv from '~hv-color/hv/transavia.js'

console.log(hv.Green);

// result: #00d66c

All RGB and HSL colors are also available like;

import { rgb } as hv from '~hv-color/hv/transavia.js'

console.log(hv.Green.r);

// result: 0

JSON

Json can be used in the same way as the JS but has a a little different build way. This so they can both be used in other cases.

import hv from "~hv-color/hv/transavia.json";

console.log(hv.Green);

// result: #00d66c

All RGB and HSL colors are also available like;

Rgb and hsl are array values for the colorName_rgb and colorName_hsl

import hv from "~hv-color/hv/transavia.js";

console.log(hv.Green_rgb[0]); // Returns the first value of Green aka the Red of Green.

// result: 0

Less

The less file works with both a list of colors which can be manipulated and hard variables.

List

.hv-colors() {
	green: #00d66c;
	greendark: #1e9162;
	greenlight: #4de298;
	...;
}

Variables

@hv-Green: #00d66c;
@hv-Green: #00d66c;
@hv-Green-h: 150.2803738317757;
@hv-Green-s: 100;
@hv-Green-l: 41.96078431372549;
@hv-Green-r: 0;
@hv-Green-g: 214;
@hv-Green-b: 108;

...;

Scss

The less file works with both a list of colors which can be manipulated and hard variables.

List default (hex) and extended (rgb/hsl).

$hv-colors: (
	"Green": #00d66c,
	"GreenDark": #1e9162,
	"GreenLight": #4de298,
	...
);

$hv-colors-extended: (
	"Green": (
		"r": 0,
		"g": 214,
		"b": 108,
		"h": 150.2803738317757,
		"s": 100,
		"l": 41.96078431372549
	),
	...
);

Variables

$hv-Green: #00d66c;
$hv-Green-s: 100;
$hv-Green-l: 41.96078431372549;
$hv-Green-r: 0;
$hv-Green-g: 214;
$hv-Green-b: 108;

...

Sketch

The sketchfile can be used in sketch in combination with the sketch-palettes plugin