xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: xt:60d1f82e099c1d2e051de950e69e4cfc811afb59
Branches Tags
xt:main
xt:wasm-load
..
compare: xt:1edc74daaf77c2538238f2176dcc87997cc84371
Branches Tags
xt:main
xt:wasm-load

No commits in common. "60d1f82e099c1d2e051de950e69e4cfc811afb59" and "1edc74daaf77c2538238f2176dcc87997cc84371" have entirely different histories.
60d1f82e09 ... 1edc74daaf

10 changed files with 24 additions and 396 deletions
Show Stats Expand all files Collapse all files

35
color-module/src/lib.rs
View File

@ -15,7 +15,6 @@ use wasm_bindgen::prelude::*;
mod color_card; mod color_card;
mod color_differ; mod color_differ;
mod errors; mod errors;
mod reversing;
#[wasm_bindgen] #[wasm_bindgen]
pub fn represent_rgb(color: &str) -> Result<Box<[u8]>, errors::ColorError> { pub fn represent_rgb(color: &str) -> Result<Box<[u8]>, errors::ColorError> {
@ -497,37 +496,3 @@ pub fn differ_in_oklch(
); );
Ok(oklch.difference(&other_oklch)) Ok(oklch.difference(&other_oklch))
} }
#[wasm_bindgen]
pub fn tint_scale(
basic_color: &str,
mixed_color: &str,
) -> Result<reversing::MixReversing, errors::ColorError> {
let basic_color = Srgb::from_str(basic_color)
.map_err(|_| errors::ColorError::UnrecogniazedRGB(basic_color.to_string()))?
.into_format::<f32>();
let mixed_color = Srgb::from_str(mixed_color)
.map_err(|_| errors::ColorError::UnrecogniazedRGB(mixed_color.to_string()))?
.into_format::<f32>();
Ok(reversing::MixReversing::from_tint_rgb(
basic_color,
mixed_color,
))
}
#[wasm_bindgen]
pub fn shade_scale(
basic_color: &str,
mixed_color: &str,
) -> Result<reversing::MixReversing, errors::ColorError> {
let basic_color = Srgb::from_str(basic_color)
.map_err(|_| errors::ColorError::UnrecogniazedRGB(basic_color.to_string()))?
.into_format::<f32>();
let mixed_color = Srgb::from_str(mixed_color)
.map_err(|_| errors::ColorError::UnrecogniazedRGB(mixed_color.to_string()))?
.into_format::<f32>();
Ok(reversing::MixReversing::from_shade_rgb(
basic_color,
mixed_color,
))
}

66
color-module/src/reversing.rs
View File

@ -1,66 +0,0 @@
use palette::rgb::Rgb;
use serde::Serialize;
use wasm_bindgen::prelude::wasm_bindgen;
#[derive(Debug, Clone, Copy, Serialize)]
#[wasm_bindgen]
pub struct MixReversing {
pub r_factor: f32,
pub g_factor: f32,
pub b_factor: f32,
pub average: f32,
}
impl MixReversing {
pub fn from_tint_rgb(basic_color: Rgb, mixed_result: Rgb) -> Self {
let r_factor = if basic_color.red == 1.0 {
0.0
} else {
(mixed_result.red - basic_color.red) / (1.0 - basic_color.red)
};
let g_factor = if basic_color.green == 1.0 {
0.0
} else {
(mixed_result.green - basic_color.green) / (1.0 - basic_color.green)
};
let b_factor = if basic_color.blue == 1.0 {
0.0
} else {
(mixed_result.blue - basic_color.blue) / (1.0 - basic_color.blue)
};
let average = (r_factor + g_factor + b_factor) / 3.0;
MixReversing {
r_factor,
g_factor,
b_factor,
average,
}
}
pub fn from_shade_rgb(basic_color: Rgb, mixed_result: Rgb) -> Self {
let r_factor = if basic_color.red == 0.0 {
0.0
} else {
(mixed_result.red - basic_color.red) / (0.0 - basic_color.red)
};
let g_factor = if basic_color.green == 0.0 {
0.0
} else {
(mixed_result.green - basic_color.green) / (0.0 - basic_color.green)
};
let b_factor = if basic_color.blue == 0.0 {
0.0
} else {
(mixed_result.blue - basic_color.blue) / (0.0 - basic_color.blue)
};
let average = (r_factor + g_factor + b_factor) / 3.0;
MixReversing {
r_factor,
g_factor,
b_factor,
average,
}
}
}

45
src/color_functions/color_module.d.ts vendored
View File

@ -34,8 +34,6 @@ export function differ_in_rgb(color: string, other: string): RGBDifference;
export function differ_in_hsl(color: string, other: string): HSLDifference; export function differ_in_hsl(color: string, other: string): HSLDifference;
export function differ_in_hct(color: string, other: string): HctDiffference; export function differ_in_hct(color: string, other: string): HctDiffference;
export function differ_in_oklch(color: string, other: string): OklchDifference; export function differ_in_oklch(color: string, other: string): OklchDifference;
export function tint_scale(basic_color: string, mixed_color: string): MixReversing;
export function shade_scale(basic_color: string, mixed_color: string): MixReversing;
export class Differ { export class Differ {
private constructor(); private constructor();
free(): void; free(): void;
@ -56,14 +54,6 @@ export class HctDiffference {
chroma: Differ; chroma: Differ;
lightness: Differ; lightness: Differ;
} }
export class MixReversing {
private constructor();
free(): void;
r_factor: number;
g_factor: number;
b_factor: number;
average: number;
}
export class OklchDifference { export class OklchDifference {
private constructor(); private constructor();
free(): void; free(): void;
@ -117,29 +107,6 @@ export interface InitOutput {
readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number]; readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number]; readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number]; readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_average: (a: number) => number;
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_r: (a: number) => number;
readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_g: (a: number) => number;
readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_b: (a: number) => number;
readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
readonly __wbg_differ_free: (a: number, b: number) => void;
readonly __wbg_get_differ_delta: (a: number) => number;
readonly __wbg_set_differ_delta: (a: number, b: number) => void;
readonly __wbg_get_differ_percent: (a: number) => number;
readonly __wbg_set_differ_percent: (a: number, b: number) => void;
readonly __wbg_oklchdifference_free: (a: number, b: number) => void; readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_hue: (a: number) => number; readonly __wbg_get_oklchdifference_hue: (a: number) => number;
readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void; readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
@ -147,6 +114,11 @@ export interface InitOutput {
readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void; readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_lightness: (a: number) => number; readonly __wbg_get_oklchdifference_lightness: (a: number) => number;
readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void; readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
readonly __wbg_differ_free: (a: number, b: number) => void;
readonly __wbg_get_differ_delta: (a: number) => number;
readonly __wbg_set_differ_delta: (a: number, b: number) => void;
readonly __wbg_get_differ_percent: (a: number) => number;
readonly __wbg_set_differ_percent: (a: number, b: number) => void;
readonly __wbg_hctdiffference_free: (a: number, b: number) => void; readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_hue: (a: number) => number; readonly __wbg_get_hctdiffference_hue: (a: number) => number;
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void; readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
@ -154,6 +126,13 @@ export interface InitOutput {
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void; readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_lightness: (a: number) => number; readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void; readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_r: (a: number) => number;
readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_g: (a: number) => number;
readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_b: (a: number) => number;
readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
readonly __wbg_hsldifference_free: (a: number, b: number) => void; readonly __wbg_hsldifference_free: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_hue: (a: number) => number; readonly __wbg_get_hsldifference_hue: (a: number) => number;
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void; readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;

113
src/color_functions/color_module.js
View File

@ -807,40 +807,6 @@ export function differ_in_oklch(color, other) {
return OklchDifference.__wrap(ret[0]); return OklchDifference.__wrap(ret[0]);
} }
/**
* @param {string} basic_color
* @param {string} mixed_color
* @returns {MixReversing}
*/
export function tint_scale(basic_color, mixed_color) {
const ptr0 = passStringToWasm0(basic_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(mixed_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ret = wasm.tint_scale(ptr0, len0, ptr1, len1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return MixReversing.__wrap(ret[0]);
}
/**
* @param {string} basic_color
* @param {string} mixed_color
* @returns {MixReversing}
*/
export function shade_scale(basic_color, mixed_color) {
const ptr0 = passStringToWasm0(basic_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len0 = WASM_VECTOR_LEN;
const ptr1 = passStringToWasm0(mixed_color, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
const ret = wasm.shade_scale(ptr0, len0, ptr1, len1);
if (ret[2]) {
throw takeFromExternrefTable0(ret[1]);
}
return MixReversing.__wrap(ret[0]);
}
function _assertClass(instance, klass) { function _assertClass(instance, klass) {
if (!(instance instanceof klass)) { if (!(instance instanceof klass)) {
throw new Error(`expected instance of ${klass.name}`); throw new Error(`expected instance of ${klass.name}`);
@ -1044,85 +1010,6 @@ export class HctDiffference {
} }
} }
const MixReversingFinalization = (typeof FinalizationRegistry === 'undefined')
? { register: () => {}, unregister: () => {} }
: new FinalizationRegistry(ptr => wasm.__wbg_mixreversing_free(ptr >>> 0, 1));
export class MixReversing {
static __wrap(ptr) {
ptr = ptr >>> 0;
const obj = Object.create(MixReversing.prototype);
obj.__wbg_ptr = ptr;
MixReversingFinalization.register(obj, obj.__wbg_ptr, obj);
return obj;
}
__destroy_into_raw() {
const ptr = this.__wbg_ptr;
this.__wbg_ptr = 0;
MixReversingFinalization.unregister(this);
return ptr;
}
free() {
const ptr = this.__destroy_into_raw();
wasm.__wbg_mixreversing_free(ptr, 0);
}
/**
* @returns {number}
*/
get r_factor() {
const ret = wasm.__wbg_get_mixreversing_r_factor(this.__wbg_ptr);
return ret;
}
/**
* @param {number} arg0
*/
set r_factor(arg0) {
wasm.__wbg_set_mixreversing_r_factor(this.__wbg_ptr, arg0);
}
/**
* @returns {number}
*/
get g_factor() {
const ret = wasm.__wbg_get_mixreversing_g_factor(this.__wbg_ptr);
return ret;
}
/**
* @param {number} arg0
*/
set g_factor(arg0) {
wasm.__wbg_set_mixreversing_g_factor(this.__wbg_ptr, arg0);
}
/**
* @returns {number}
*/
get b_factor() {
const ret = wasm.__wbg_get_mixreversing_b_factor(this.__wbg_ptr);
return ret;
}
/**
* @param {number} arg0
*/
set b_factor(arg0) {
wasm.__wbg_set_mixreversing_b_factor(this.__wbg_ptr, arg0);
}
/**
* @returns {number}
*/
get average() {
const ret = wasm.__wbg_get_mixreversing_average(this.__wbg_ptr);
return ret;
}
/**
* @param {number} arg0
*/
set average(arg0) {
wasm.__wbg_set_mixreversing_average(this.__wbg_ptr, arg0);
}
}
const OklchDifferenceFinalization = (typeof FinalizationRegistry === 'undefined') const OklchDifferenceFinalization = (typeof FinalizationRegistry === 'undefined')
? { register: () => {}, unregister: () => {} } ? { register: () => {}, unregister: () => {} }
: new FinalizationRegistry(ptr => wasm.__wbg_oklchdifference_free(ptr >>> 0, 1)); : new FinalizationRegistry(ptr => wasm.__wbg_oklchdifference_free(ptr >>> 0, 1));

BIN
src/color_functions/color_module_bg.wasm
View File

Binary file not shown.

35
src/color_functions/color_module_bg.wasm.d.ts vendored
View File

@ -35,29 +35,6 @@ export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [num
export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number]; export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number]; export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number]; export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_mixreversing_free: (a: number, b: number) => void;
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_average: (a: number) => number;
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
export const __wbg_rgbdifference_free: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_r: (a: number) => number;
export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_g: (a: number) => number;
export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_b: (a: number) => number;
export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
export const __wbg_differ_free: (a: number, b: number) => void;
export const __wbg_get_differ_delta: (a: number) => number;
export const __wbg_set_differ_delta: (a: number, b: number) => void;
export const __wbg_get_differ_percent: (a: number) => number;
export const __wbg_set_differ_percent: (a: number, b: number) => void;
export const __wbg_oklchdifference_free: (a: number, b: number) => void; export const __wbg_oklchdifference_free: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_hue: (a: number) => number; export const __wbg_get_oklchdifference_hue: (a: number) => number;
export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void; export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
@ -65,6 +42,11 @@ export const __wbg_get_oklchdifference_chroma: (a: number) => number;
export const __wbg_set_oklchdifference_chroma: (a: number, b: number) => void; export const __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_lightness: (a: number) => number; export const __wbg_get_oklchdifference_lightness: (a: number) => number;
export const __wbg_set_oklchdifference_lightness: (a: number, b: number) => void; export const __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
export const __wbg_differ_free: (a: number, b: number) => void;
export const __wbg_get_differ_delta: (a: number) => number;
export const __wbg_set_differ_delta: (a: number, b: number) => void;
export const __wbg_get_differ_percent: (a: number) => number;
export const __wbg_set_differ_percent: (a: number, b: number) => void;
export const __wbg_hctdiffference_free: (a: number, b: number) => void; export const __wbg_hctdiffference_free: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_hue: (a: number) => number; export const __wbg_get_hctdiffference_hue: (a: number) => number;
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void; export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
@ -72,6 +54,13 @@ export const __wbg_get_hctdiffference_chroma: (a: number) => number;
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void; export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_lightness: (a: number) => number; export const __wbg_get_hctdiffference_lightness: (a: number) => number;
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void; export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
export const __wbg_rgbdifference_free: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_r: (a: number) => number;
export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_g: (a: number) => number;
export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_b: (a: number) => number;
export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
export const __wbg_hsldifference_free: (a: number, b: number) => void; export const __wbg_hsldifference_free: (a: number, b: number) => void;
export const __wbg_get_hsldifference_hue: (a: number) => number; export const __wbg_get_hsldifference_hue: (a: number) => number;
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void; export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;

12
src/page-components/color-compare/CompareLayout.module.css
View File

@ -4,9 +4,6 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
gap: var(--spacing-m); gap: var(--spacing-m);
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
.element { .element {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -15,10 +12,6 @@
.element_name { .element_name {
font-size: var(--font-size-xxl); font-size: var(--font-size-xxl);
font-weight: bold; font-weight: bold;
&.mean {
border-top: 2px solid var(--color-fg);
padding-top: var(--spacing-xxs);
}
} }
.element_values { .element_values {
display: flex; display: flex;
@ -27,11 +20,6 @@
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
line-height: var(--font-size-xs); line-height: var(--font-size-xs);
} }
.element_value {
align-self: flex-end;
font-size: var(--font-size-s);
line-height: var(--font-size-s);
}
} }
} }
} }

55
src/page-components/color-compare/ShadeScale.tsx
View File

@ -1,55 +0,0 @@
import cx from 'clsx';
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;
}
try {
const factor = colorFn.shade_scale(basic, compare);
return factor;
} catch (e) {
console.error('[Reversing Tint]', e);
}
return defaultMixResult;
}, [basic, compare]);
return (
<div>
<h6>Compare in RGB Shade.</h6>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>R</div>
<div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>G</div>
<div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>B</div>
<div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
</div>
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>
</div>
);
}

55
src/page-components/color-compare/TintScale.tsx
View File

@ -1,55 +0,0 @@
import cx from 'clsx';
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;
}
try {
const factor = colorFn.tint_scale(basic, compare);
return factor;
} catch (e) {
console.error('[Reversing Tint]', e);
}
return defaultMixResult;
}, [basic, compare]);
return (
<div>
<h6>Compare in RGB Tint.</h6>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>R</div>
<div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>G</div>
<div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>B</div>
<div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
</div>
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>
</div>
);
}

4
src/pages/Compare.tsx
View File

@ -6,8 +6,6 @@ import { HCTCompare } from '../page-components/color-compare/HCTCompare';
import { HSLCompare } from '../page-components/color-compare/HSLCompare'; import { HSLCompare } from '../page-components/color-compare/HSLCompare';
import { OklchCompare } from '../page-components/color-compare/OKLCHCompare'; import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
import { RGBCompare } from '../page-components/color-compare/RGBCompare'; import { RGBCompare } from '../page-components/color-compare/RGBCompare';
import { ShadeScale } from '../page-components/color-compare/ShadeScale';
import { TintScale } from '../page-components/color-compare/TintScale';
import styles from './Compare.module.css'; import styles from './Compare.module.css';
export function ColorCompare() { export function ColorCompare() {
@ -38,8 +36,6 @@ export function ColorCompare() {
<HSLCompare basic={basicColor} compare={compareColor} /> <HSLCompare basic={basicColor} compare={compareColor} />
<HCTCompare basic={basicColor} compare={compareColor} /> <HCTCompare basic={basicColor} compare={compareColor} />
<OklchCompare basic={basicColor} compare={compareColor} /> <OklchCompare basic={basicColor} compare={compareColor} />
<TintScale basic={basicColor} compare={compareColor} />
<ShadeScale basic={basicColor} compare={compareColor} />
</div> </div>
</div> </div>
</ScrollArea> </ScrollArea>