feat: blend colors

README.md

@@ -16,7 +16,8 @@ A lightweight JavaScript/TypeScript utility for seamless color manipulation and
 - **Color Conversion:** Convert colors between HEX, RGB, HSL, HSLA, RGBA and Tailwind CSS formats.
 - **Color Manipulation:** Lighten or darken a color by a specified percentage.
 - **Random Color Generation:** Generate random colors in HEX, RGB, HSL, or Tailwind CSS format.
-- **Opacity Manipulation:** Set the opacity of color in any format.
+- **Opacity Control:** Sets the opacity of color in any format.
+- **Blend Colors:** Blends two colors in any format together in a specified ratio.
 
 More features coming soon!
 
@@ -143,6 +144,22 @@ setOpacity("#ff5733", 0.5, "rgba"); // 'rgba(255, 88, 51, 0.5)'
 setOpacity("rgb(200, 100, 150)", 0.3, "hsla"); // hsla(330, 48%, 59%, 0.3)
 ```
 
+**blendColors**
+
+Blends two colors together to create a new color.
+
+```ts
+blendColors(color1: string, color2: string, ratio: number): string
+```
+
+```ts
+blendColors("#ff5733", "#333333", 0.5); // '#994533'
+blendColors("rgb(255, 87, 51)", "hsl(101, 100%, 60%)", 0.2); // 'rgb(227, 121, 51)'
+```
+
+**_Note_**: It returns the color in the format of the first color provided.<br>
+The prefix for Tailwind color will be taken from the first color.
+
 ---
 
 ### 🛠️ Development

ROADMAP.md

@@ -3,7 +3,7 @@
 ### v0.2.0
 
 - [x] Add support for rgba and hsla
-- [ ] Blend Colors
+- [x] Blend Colors
 - [x] Adjust Opacity
 
 ### v0.3.0

index.ts

@@ -3,6 +3,7 @@ import { lightenColor, darkenColor } from "./utils/lightenDarken";
 import { randomColor } from "./utils/randomColor";
 import { toTailwind } from "./utils/toTailwind";
 import { setOpacity } from "./utils/setOpacity";
+import { blendColors } from "./utils/blendColors";
 
 export {
   convertColor,
@@ -11,6 +12,7 @@ export {
   randomColor,
   toTailwind,
   setOpacity,
+  blendColors,
 };
 
 const PigmentTS = {
@@ -20,6 +22,7 @@ const PigmentTS = {
   randomColor,
   toTailwind,
   setOpacity,
+  blendColors,
 };
 
 export default PigmentTS;

lib/blendRgb.ts

@@ -0,0 +1,25 @@
+/**
+ * Mixes two rgb colors together
+ */
+export function blendRgb(
+  rgbColor: string,
+  rgbColor2: string,
+  ratio: number
+): string {
+  if (rgbColor === rgbColor2) return rgbColor;
+
+  const color1 = rgbColor.match(/\d+/g) as string[];
+  const color2 = rgbColor2.match(/\d+/g) as string[];
+
+  const r = Math.round(
+    parseInt(color1[0]) + (parseInt(color2[0]) - parseInt(color1[0])) * ratio
+  );
+  const g = Math.round(
+    parseInt(color1[1]) + (parseInt(color2[1]) - parseInt(color1[1])) * ratio
+  );
+  const b = Math.round(
+    parseInt(color1[2]) + (parseInt(color2[2]) - parseInt(color1[2])) * ratio
+  );
+
+  return `rgb(${r}, ${g}, ${b})`;
+}

lib/lightenDarkenTw.ts

@@ -77,7 +77,7 @@ function calcAmount(
 /**
  * Extracts the prefix from a tailwind color
  */
-function extractPrefix(twColor: string): string {
+export function extractPrefix(twColor: string): string {
   for (const prefix of TAILWIND_PREFIXES) {
     if (twColor.startsWith(prefix)) {
       return prefix;

lib/setHslaOpacity.ts

@@ -1,4 +1,10 @@
-export function setHslaOpacity(hslaColor: string, amount: number): string {
+/**
+ * The setHslaOpacity function sets the opacity of an HSLA color
+ */
+export function setHslaOpacity(
+  hslaColor: string,
+  amount: number | string
+): string {
   const alpha = hslaColor.split(", ")[3];
   return hslaColor.replace(alpha, amount.toString() + ")");
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pigment-ts",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "🎨 A lightweight utility for color manipulation and conversion.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",