function to generate hex colors

Author: hougesen

README.md

@@ -1,6 +1,6 @@
 # generate-random-color
 
-NPM package for generating random RGB, RGBA, HSL and HSLA colors.
+NPM package for generating random HEX, RGB, RGBA, HSL and HSLA colors.
 
 ## Install
 
@@ -16,7 +16,11 @@ const generateRandomColor = require('generate-random-color');
 import generateRandomColor from 'generate-random-color';
 
 // The function can either be called by simply calling the function like this
+generateRandomColor.hex();
 generateRandomColor.rgb();
+generateRandomColor.rgba();
+generateRandomColor.hsl();
+generateRandomColor.hsla();
 
 // or by passing optional min max values.
 generateRandomColor.rgb({
@@ -31,22 +35,30 @@ generateRandomColor.rgb({
   b: { min: 0, max: 100 },
 });
 
-// RGBA
+// HEX can be passed a specific value. If no input is given the value will be between 00 - FF
+// Returns #FF69B4
+generateRandomColor.hex({
+  r: 'ff',
+  g: '69',
+  b: 'b4',
+});
+
+// RGBA default values
 generateRandomColor.rgba({
   r: { min: 0, max: 255 },
   g: { min: 0, max: 255 },
   b: { min: 0, max: 255 },
   a: { min: 0, max: 1 },
 });
 
-// HSL
+// HSL default values
 generateRandomColor.hsl({
   h: { min: 0, max: 360 },
   s: { min: 0, max: 100 },
   l: { min: 0, max: 100 },
 });
 
-// HSLA
+// HSLA default values
 generateRandomColor.hsla({
   h: { min: 0, max: 360 },
   s: { min: 0, max: 100 },

package.json

@@ -24,7 +24,6 @@
   ],
   "scripts": {
     "start": "ts-node src/index.ts",
-    "tet": "ts-node src/__tests__/tet.ts",
     "build": "tsc -b",
     "format": "prettier --write . ",
     "lint": "eslint src/**/*.ts",

src/__tests__/hex.test.ts

@@ -0,0 +1,9 @@
+import { hex } from '../index';
+
+test('HEX: Typeof', () => {
+  expect(typeof hex()).toBe('string');
+});
+
+test('HEX: Typeof', () => {
+  expect(hex({ r: 'ff', g: 'ff', b: 'ff' }) === '#FFFFFF').toBe(true);
+});

src/__tests__/hsl.test.ts

@@ -1,5 +1,5 @@
 import { hsl } from '../index';
 
-test('Typeof HSL', () => {
+test('HSL: Typeof', () => {
   expect(typeof hsl()).toBe('string');
 });

src/__tests__/hsla.test.ts

@@ -1,5 +1,5 @@
 import { hsla } from '../index';
 
-test('Typeof HSLA', () => {
+test('HSLA: Typeof', () => {
   expect(typeof hsla()).toBe('string');
 });

src/__tests__/rgb.test.ts

@@ -1,5 +1,5 @@
 import { rgb } from '../index';
 
-test('Typeof rgb', () => {
+test('RGB: Typeof', () => {
   expect(typeof rgb()).toBe('string');
 });

src/__tests__/rgba.test.ts

@@ -1,5 +1,5 @@
 import { rgba } from '../index';
 
-test('Typeof rgba', () => {
+test('RGBA: Typeof', () => {
   expect(typeof rgba()).toBe('string');
 });

src/color-types/hex.ts

@@ -0,0 +1,50 @@
+import generateNum from '../helpers/generateNum';
+
+type HEX = {
+  r?: string;
+  g?: string;
+  b?: string;
+};
+
+function generateHex() {
+  const generate = () => {
+    const value = generateNum(16, { min: 0, max: 15 });
+
+    return convertNumberToHex(value);
+  };
+
+  return `${generate()}${generate()}`;
+}
+
+function convertNumberToHex(input: number) {
+  switch (input) {
+    case 10:
+      return 'A';
+
+    case 11:
+      return 'B';
+
+    case 12:
+      return 'C';
+
+    case 13:
+      return 'D';
+
+    case 14:
+      return 'E';
+
+    case 15:
+      return 'F';
+
+    default:
+      return input.toString();
+  }
+}
+
+export default function (input?: HEX): string {
+  const r = input?.r ? input.r : generateHex();
+  const g = input?.g ? input.g : generateHex();
+  const b = input?.b ? input.b : generateHex();
+
+  return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`;
+}

src/color-types/hsl.ts

@@ -7,5 +7,5 @@ type HSL = {
 };
 
 export default function (input?: HSL): string {
-  return `hsl(${generateNum(361, input?.h)}, ${generateNum(101, input?.s)}%, ${generateNum(101, input?.h)}%)`;
+  return `hsl(${generateNum(361, input?.h)}, ${generateNum(101, input?.s)}%, ${generateNum(101, input?.l)}%)`;
 }

src/color-types/hsla.ts

@@ -11,6 +11,6 @@ type HSLA = {
 export default function (input?: HSLA): string {
   return `hsla(${generateNum(361, input?.h)}, ${generateNum(101, input?.s)}%, ${generateNum(
     101,
-    input?.h,
+    input?.l,
   )}%, ${generateFloat(1, input?.a)})`;
 }

src/helpers/generateNum.ts

@@ -4,6 +4,8 @@ type minMax = {
 };
 
 export default function (trueMax: number, numRange?: minMax): number {
+  if (numRange?.max) ++numRange.max;
+
   const max = numRange?.max != undefined && numRange.max <= trueMax ? numRange.max : trueMax;
 
   const min = numRange?.min != undefined && numRange.min >= 0 ? numRange.min : 0;

src/index.ts

@@ -2,6 +2,7 @@ import genHSL from './color-types/hsl';
 import genHSLA from './color-types/hsla';
 import genRGB from './color-types/rgb';
 import genRGBA from './color-types/rgba';
+import genHEX from './color-types/hex';
 
 type HSL = {
   h?: { min?: number; max?: number };
@@ -28,6 +29,12 @@ type RGBA = {
   a?: { min?: number; max?: number };
 };
 
+type HEX = {
+  r?: string;
+  g?: string;
+  b?: string;
+};
+
 export const hsl = (input?: HSL): string => {
   const base = {
     h: {
@@ -111,3 +118,11 @@ export const rgba = (input?: RGBA): string => {
 
   return genRGBA(base);
 };
+
+export const hex = (input?: HEX): string => {
+  if (input) {
+    return genHEX(input);
+  } else {
+    return genHEX();
+  }
+};