Soroush.Asadi
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
export const DEFAULT_SCENE_BACKGROUND_COLOR = "#ffffff";
|
|
export const DEFAULT_SCENE_ACCENT_COLOR = "#94a3b8";
|
|
|
|
/**
|
|
* Each palette: [mainBg, accent, text, dark, darkest]
|
|
* Inspired by Renderforest's palette library.
|
|
*/
|
|
export const COLOR_PALETTES: string[][] = [
|
|
// 1 — Steel blue
|
|
["#b0c8e0", "#7898b0", "#2a3a50", "#141a28", "#080c14"],
|
|
// 2 — Yellow-lime
|
|
["#d8d040", "#90b838", "#3a5020", "#1a2810", "#28281a"],
|
|
// 3 — Warm sunset
|
|
["#d8b08a", "#c07060", "#881820", "#4a0808", "#1a0408"],
|
|
// 4 — Mint teal
|
|
["#90d8b8", "#50c8a0", "#107860", "#064030", "#021a14"],
|
|
// 5 — Royal blue
|
|
["#a0b8f0", "#5878e8", "#2028b0", "#0a1060", "#080830"],
|
|
// 6 — Rose pink
|
|
["#f0a8c0", "#e04898", "#981060", "#4a0830", "#200818"],
|
|
// 7 — Warm amber
|
|
["#e8b880", "#d07838", "#9a3010", "#4a1808", "#1a0804"],
|
|
// 8 — Deep violet
|
|
["#d8a8f0", "#b068e8", "#701898", "#380850", "#18041e"],
|
|
// 9 — Periwinkle
|
|
["#d0d8f0", "#a8b8e8", "#6070d0", "#2030a0", "#101870"],
|
|
// 10 — Gold amber
|
|
["#f0e040", "#e0b830", "#987010", "#485010", "#202810"],
|
|
// 11 — Silver neutral
|
|
["#f0f2f4", "#c0d0d8", "#8098a8", "#304050", "#90c0e0"],
|
|
// 12 — Forest green
|
|
["#a0e0a8", "#60c870", "#207820", "#103810", "#081808"],
|
|
// 13 — Warm gray + orange
|
|
["#e0e0e0", "#9098a0", "#404858", "#d07030", "#c05020"],
|
|
// 14 — Coral red
|
|
["#f09090", "#e83030", "#e0e0e0", "#3a3a3a", "#f0c030"],
|
|
// 15 — Midnight teal
|
|
["#1a3a4a", "#0d5c6e", "#1a9aae", "#80d0df", "#e0f4f8"],
|
|
// 16 — Neon purple
|
|
["#2d0060", "#5c00c0", "#9b30ff", "#d090ff", "#f0d8ff"],
|
|
// 17 — Earthy brown
|
|
["#3d2010", "#7a4020", "#c07840", "#e0b880", "#f5e0c0"],
|
|
// 18 — Ocean depth
|
|
["#001030", "#003060", "#0060c0", "#40a0e0", "#a0d8f8"],
|
|
// 19 — Cherry blossom
|
|
["#f8e0e8", "#f0a0c0", "#e04880", "#980840", "#400018"],
|
|
// 20 — Electric teal
|
|
["#003030", "#006060", "#00a8a8", "#40e0d0", "#a0f4f0"],
|
|
];
|
|
|
|
/** Returns a human-readable name for display purposes */
|
|
export const PALETTE_NAMES: string[] = [
|
|
"Steel Blue",
|
|
"Yellow Lime",
|
|
"Warm Sunset",
|
|
"Mint Teal",
|
|
"Royal Blue",
|
|
"Rose Pink",
|
|
"Warm Amber",
|
|
"Deep Violet",
|
|
"Periwinkle",
|
|
"Gold Amber",
|
|
"Silver",
|
|
"Forest Green",
|
|
"Urban Gray",
|
|
"Coral Red",
|
|
"Midnight Teal",
|
|
"Neon Purple",
|
|
"Earthy Brown",
|
|
"Ocean Depth",
|
|
"Cherry Blossom",
|
|
"Electric Teal",
|
|
];
|
|
|
|
/** @deprecated Use COLOR_PALETTES */
|
|
export const STUDIO_COLOR_PALETTES = COLOR_PALETTES.map((colors, index) => ({
|
|
id: `palette-${index}`,
|
|
name: PALETTE_NAMES[index] ?? `Palette ${index + 1}`,
|
|
colors: colors.slice(0, 4) as [string, string, string, string],
|
|
}));
|
|
|
|
/** Returns true if the hex color is perceptually dark (good for white text on top) */
|
|
export function isColorDark(hex: string): boolean {
|
|
const clean = hex.replace("#", "");
|
|
const r = parseInt(clean.slice(0, 2), 16);
|
|
const g = parseInt(clean.slice(2, 4), 16);
|
|
const b = parseInt(clean.slice(4, 6), 16);
|
|
// WCAG luminance approximation
|
|
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
return brightness < 128;
|
|
}
|
|
|
|
/** Pick a readable text colour for a given background */
|
|
export function contrastTextColor(bgHex: string): string {
|
|
return isColorDark(bgHex) ? "#ffffff" : "#111827";
|
|
}
|