Rgb

src/helpers/rgb.js

@@ -0,0 +1,48 @@
+// @flow
+
+/**
+ * Returns a string value for the color. The returned result is the smalles possible hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgb(255, 205, 100),
+ *   background: rgb({ red: 255, green: 205, blue: 100 }),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgb(255, 205, 100)};
+ *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#ffcd64";
+ *   background: "#ffcd64";
+ * }
+ */
+
+type RgbColor = {
+  red: number,
+  green: number,
+  blue: number,
+}
+
+function toHex(value) {
+  const hex = value.toString(16)
+  return hex.length === 1 ? `0${hex}` : hex
+}
+
+function rgb(value: RgbColor | number, green?: number, blue?: number): string {
+  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
+    return `#${toHex(value)}${toHex(green)}${toHex(blue)}`
+  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
+    return `#${toHex(value.red)}${toHex(value.green)}${toHex(value.blue)}`
+  }
+
+  throw new Error('Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).')
+}
+
+export default rgb

src/helpers/test/__snapshots__/rgb.test.js.snap

@@ -0,0 +1,11 @@
+exports[`rgb should convert a rgb object to a hex color 1`] = `
+Object {
+  "background": "#ffcd64",
+}
+`;
+
+exports[`rgb should convert multiple numbers to a hex color 1`] = `
+Object {
+  "background": "#ffcd64",
+}
+`;

src/helpers/test/rgb.test.js

@@ -0,0 +1,17 @@
+// @flow
+import rgb from '../rgb'
+
+describe('rgb', () => {
+  it('should convert multiple numbers to a hex color', () => {
+    expect({ background: rgb(255, 205, 100) }).toMatchSnapshot()
+  })
+
+  it('should convert a rgb object to a hex color', () => {
+    expect({ background: rgb({ red: 255, green: 205, blue: 100 }) }).toMatchSnapshot()
+  })
+
+  it('should throw an error if an object and multiple arguments are passed', () => {
+    expect(() => ({ background: rgb({ red: 255, green: 1, blue: 1 }, 250, 100) }))
+      .toThrow('Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).')
+  })
+})