Skip to main content

color_functions

hexToRgb#

R: 0x10 G: 0x7a B: 0xbe

import { hexToRgb } from 'app-functions';
export const hexToRgb = (H) => {
let r = 0;
let g = 0;
let b = 0;
if (H.length == 4) {
r = `0x${H[1]}${H[1]}`;
g = `0x${H[2]}${H[2]}`;
b = `0x${H[3]}${H[3]}`;
} else if (H.length == 7) {
r = `0x${H[1]}${H[2]}`;
g = `0x${H[3]}${H[4]}`;
b = `0x${H[5]}${H[6]}`;
}
return { r, g, b };
};
export const HexToRgbApp = () => {
const [value, setValue] = React.useState('#107abe');
return (
<div className="box-border">
<Input
onChange={(e) => setValue(e.target.value)}
value={value}
className="w-50"
placeholder="کد رنگ hex را وارد کنید"
/>
<Typography className="mt-24">
R: {hexToRgb(value).r} G: {hexToRgb(value).g} B: {hexToRgb(value).b}
</Typography>
</div>
);
};

hexToHSL#

return {
default: `hsl(${h},${s}%,${l}%)`,
darker: `hsl(${h},${s}%,${l - 10}%)`,
light: `hsl(${h},${s}%,${l + 5}%,` + `0.6)`,
lighter: `hsl(${h},${s}%,${l - 20}%,` + `0.1)`,
fontColor: d,
};

default: hsl(203,84.5%,40.4%)darker: hsl(203,84.5%,30.4%)light: hsl(203,84.5%,45.4%,0.6)lighter: hsl(203,84.5%,20.4%,0.1)fontColor of #107abe : #ffffff

import { hexToHSL } from 'app-functions';
export const hexToHSL = (H) => {
let colors = hexToRgb(H);
let r = colors.r;
let g = colors.g;
let b = colors.b;
let d = getFontColorFromBackground(H);
// Then to HSL
r /= 255;
g /= 255;
b /= 255;
const cmin = Math.min(r, g, b);
const cmax = Math.max(r, g, b);
const delta = cmax - cmin;
let h = 0;
let s = 0;
let l = 0;
if (delta == 0) h = 0;
else if (cmax == r) h = ((g - b) / delta) % 6;
else if (cmax == g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0) h += 360;
l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
// return light and dark color
const color = {
default: `hsl(${h},${s}%,${l}%)`,
darker: `hsl(${h},${s}%,${l - 10}%)`,
light: `hsl(${h},${s}%,${l + 5}%,` + `0.6)`,
lighter: `hsl(${h},${s}%,${l - 20}%,` + `0.1)`,
fontColor: d,
};
return color;
};
export const HexToHSLApp = () => {
const [value, setValue] = React.useState('#107abe');
return (
<div className="box-border">
<Input
onChange={(e) => setValue(e.target.value)}
value={value}
className="w-50"
placeholder="کد رنگ hex را وارد کنید"
/>
<Typography className="mt-24">
<span
className="d-block mb-16"
style={{ color: hexToHSL(value).default }}
>
default: {hexToHSL(value).default}
</span>
<span
className="d-block mb-16"
style={{ color: hexToHSL(value).darker }}
>
darker: {hexToHSL(value).darker}
</span>
<span
className="d-block mb-16"
style={{ color: hexToHSL(value).light }}
>
light: {hexToHSL(value).light}
</span>
<span
className="d-block mb-16"
style={{ color: hexToHSL(value).lighter }}
>
lighter: {hexToHSL(value).lighter}
</span>
<span
className="d-block mb-16"
style={{ color: hexToHSL(value).fontColor, background: value }}
>
fontColor of {value} : {hexToHSL(value).fontColor}
</span>
</Typography>
</div>
);
};

getFontColorFromBackground#

#ffffff

import { getFontColorFromBackground } from 'app-functions';
export const getFontColorFromBackground = (H) => {
let colors = hexToRgb(H);
let r = colors.r;
let g = colors.g;
let b = colors.b;
let d = 0;
let luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
if (luminance > 0.5) d = '#505050';
else d = '#ffffff';
return d;
};
export const GetFontColorFromBackgroundApp = () => {
const [value, setValue] = React.useState('#107abe');
return (
<div className="box-border">
<Input
onChange={(e) => setValue(e.target.value)}
value={value}
className="w-50"
placeholder="کد رنگ hex را وارد کنید"
/>
<p
style={{ color: getFontColorFromBackground(value), background: value }}
className="mt-24"
>
{getFontColorFromBackground(value)}
</p>
</div>
);
};