feat: Widgets color generation utility functions (#21731)

## Description

Fixes #21625 

## Type of change

- New feature (non-breaking change which adds functionality)
- Chore (housekeeping or task changes that don't impact user perception)

## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/packages/wds/src/utils/colors.ts

@@ -1,5 +1,47 @@
 import Color from "colorjs.io";
 
+/* Color Utility Functions. Lightness */
+
+export const isVeryDark = (hex = "#000") => {
+  return parseColor(hex).oklch.l < 30;
+};
+
+export const isVeryLight = (hex = "#000") => {
+  return parseColor(hex).oklch.l > 90;
+};
+
+/* Chroma */
+
+export const isAchromatic = (hex = "#000") => {
+  return parseColor(hex).oklch.c < 5;
+};
+
+export const isColorful = (hex = "#000") => {
+  return parseColor(hex).oklch.c > 17;
+};
+
+/* Hue */
+
+export const isCold = (hex = "#000") => {
+  return parseColor(hex).oklch.h >= 120 && parseColor(hex).oklch.h <= 300;
+};
+
+export const isBlue = (hex = "#000") => {
+  return parseColor(hex).oklch.h >= 230 && parseColor(hex).oklch.h <= 270;
+};
+
+export const isGreen = (hex = "#000") => {
+  return parseColor(hex).oklch.h >= 105 && parseColor(hex).oklch.h <= 165;
+};
+
+export const isYellow = (hex = "#000") => {
+  return parseColor(hex).oklch.h >= 60 && parseColor(hex).oklch.h <= 75;
+};
+
+export const isRed = (hex = "#000") => {
+  return parseColor(hex).oklch.h >= 29 && parseColor(hex).oklch.h <= 50;
+};
+
 /**
  * returns black or white based on the constrast of the color compare to white
  * using APCA algorithm