diff --git a/.all-contributorsrc b/.all-contributorsrc
index b3bb0ff05..be0358574 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -196,6 +196,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "shuta13",
+      "name": "Shuta Hirai",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38882716?v=4",
+      "profile": "https://studio.did0es.me/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "skipCi": true,
diff --git a/README.md b/README.md
index 4576109a4..b1000e505 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/Jazcash"><img src="https://avatars.githubusercontent.com/u/1434248?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jazcash</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Jazcash" title="Code">💻</a></td>
     <td align="center"><a href="https://bjornstar.com/"><img src="https://avatars.githubusercontent.com/u/20630?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bjorn Stromberg</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=bjornstar" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/happy-turtle"><img src="https://avatars.githubusercontent.com/u/18415215?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HappyTurtle</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=happy-turtle" title="Code">💻</a></td>
+    <td align="center"><a href="https://studio.did0es.me/"><img src="https://avatars.githubusercontent.com/u/38882716?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shuta Hirai</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=shuta13" title="Code">💻</a></td>
   </tr>
 </table>
 
diff --git a/types/three/examples/jsm/helpers/RectAreaLightHelper.d.ts b/types/three/examples/jsm/helpers/RectAreaLightHelper.d.ts
index eb2484799..fe0595d39 100644
--- a/types/three/examples/jsm/helpers/RectAreaLightHelper.d.ts
+++ b/types/three/examples/jsm/helpers/RectAreaLightHelper.d.ts
@@ -1,10 +1,10 @@
-import { Color, Line, RectAreaLight } from '../../../src/Three';
+import { Line, RectAreaLight, ColorRepresentation } from '../../../src/Three';
 
 export class RectAreaLightHelper extends Line {
-    constructor(light: RectAreaLight, color?: Color | string | number);
+    constructor(light: RectAreaLight, color?: ColorRepresentation);
 
     light: RectAreaLight;
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
 
     dispose(): void;
 }
diff --git a/types/three/examples/jsm/nodes/inputs/ColorNode.d.ts b/types/three/examples/jsm/nodes/inputs/ColorNode.d.ts
index aae9c7330..6c2506cea 100644
--- a/types/three/examples/jsm/nodes/inputs/ColorNode.d.ts
+++ b/types/three/examples/jsm/nodes/inputs/ColorNode.d.ts
@@ -4,7 +4,7 @@ import { InputNode } from '../core/InputNode';
 import { NodeBuilder } from '../core/NodeBuilder';
 
 export class ColorNode extends InputNode {
-    constructor(color: Color | number | string, g?: number, b?: number);
+    constructor(color: ColorRepresentation, g?: number, b?: number);
 
     value: Color;
     nodeType: string;
diff --git a/types/three/examples/jsm/objects/Water.d.ts b/types/three/examples/jsm/objects/Water.d.ts
index 634ef6411..0da6638ba 100644
--- a/types/three/examples/jsm/objects/Water.d.ts
+++ b/types/three/examples/jsm/objects/Water.d.ts
@@ -1,4 +1,4 @@
-import { BufferGeometry, Color, Mesh, Side, Texture, Vector3 } from '../../../src/Three';
+import { BufferGeometry, ColorRepresentation, Mesh, Side, Texture, Vector3 } from '../../../src/Three';
 
 export interface WaterOptions {
     textureWidth?: number;
@@ -8,8 +8,8 @@ export interface WaterOptions {
     time?: number;
     waterNormals?: Texture;
     sunDirection?: Vector3;
-    sunColor?: Color | string | number;
-    waterColor?: Color | string | number;
+    sunColor?: ColorRepresentation;
+    waterColor?: ColorRepresentation;
     eye?: Vector3;
     distortionScale?: number;
     side?: Side;
diff --git a/types/three/examples/jsm/objects/Water2.d.ts b/types/three/examples/jsm/objects/Water2.d.ts
index b134a5669..44919ddb2 100644
--- a/types/three/examples/jsm/objects/Water2.d.ts
+++ b/types/three/examples/jsm/objects/Water2.d.ts
@@ -1,7 +1,7 @@
-import { BufferGeometry, Color, Mesh, Texture, TextureEncoding, Vector2 } from '../../../src/Three';
+import { BufferGeometry, ColorRepresentation, Mesh, Texture, TextureEncoding, Vector2 } from '../../../src/Three';
 
 export interface Water2Options {
-    color?: Color | string | number;
+    color?: ColorRepresentation;
     textureWidth?: number;
     textureHeight?: number;
     clipBias?: number;
diff --git a/types/three/examples/jsm/postprocessing/ClearPass.d.ts b/types/three/examples/jsm/postprocessing/ClearPass.d.ts
index f507d50f6..aa18623e3 100644
--- a/types/three/examples/jsm/postprocessing/ClearPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/ClearPass.d.ts
@@ -1,9 +1,9 @@
-import { Color } from '../../../src/Three';
+import { ColorRepresentation } from '../../../src/Three';
 
 import { Pass } from './Pass';
 
 export class ClearPass extends Pass {
-    constructor(clearColor?: Color | string | number, clearAlpha?: number);
-    clearColor: Color | string | number;
+    constructor(clearColor?: ColorRepresentation, clearAlpha?: number);
+    clearColor: ColorRepresentation;
     clearAlpha: number;
 }
diff --git a/types/three/examples/jsm/postprocessing/SAOPass.d.ts b/types/three/examples/jsm/postprocessing/SAOPass.d.ts
index c586a47aa..c5b7f760e 100644
--- a/types/three/examples/jsm/postprocessing/SAOPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/SAOPass.d.ts
@@ -9,6 +9,7 @@ import {
     Vector2,
     WebGLRenderer,
     WebGLRenderTarget,
+    ColorRepresentation,
 } from '../../../src/Three';
 
 import { Pass } from './Pass';
@@ -65,14 +66,14 @@ export class SAOPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
     renderOverride(
         renderer: WebGLRenderer,
         overrideMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
 }
diff --git a/types/three/examples/jsm/postprocessing/SSAARenderPass.d.ts b/types/three/examples/jsm/postprocessing/SSAARenderPass.d.ts
index fef65b561..59cc003e6 100644
--- a/types/three/examples/jsm/postprocessing/SSAARenderPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/SSAARenderPass.d.ts
@@ -1,14 +1,14 @@
-import { Scene, Camera, Color, ShaderMaterial, WebGLRenderTarget } from '../../../src/Three';
+import { Scene, Camera, ColorRepresentation, ShaderMaterial, WebGLRenderTarget } from '../../../src/Three';
 
 import { Pass } from './Pass';
 
 export class SSAARenderPass extends Pass {
-    constructor(scene: Scene, camera: Camera, clearColor: Color | string | number, clearAlpha: number);
+    constructor(scene: Scene, camera: Camera, clearColor: ColorRepresentation, clearAlpha: number);
     scene: Scene;
     camera: Camera;
     sampleLevel: number;
     unbiased: boolean;
-    clearColor: Color | string | number;
+    clearColor: ColorRepresentation;
     clearAlpha: number;
     copyUniforms: object;
     copyMaterial: ShaderMaterial;
diff --git a/types/three/examples/jsm/postprocessing/SSAOPass.d.ts b/types/three/examples/jsm/postprocessing/SSAOPass.d.ts
index b9f067fb8..ea3212e45 100644
--- a/types/three/examples/jsm/postprocessing/SSAOPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/SSAOPass.d.ts
@@ -9,6 +9,7 @@ import {
     Vector3,
     WebGLRenderer,
     WebGLRenderTarget,
+    ColorRepresentation,
 } from '../../../src/Three';
 
 import { Pass } from './Pass';
@@ -57,14 +58,14 @@ export class SSAOPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
     renderOverride(
         renderer: WebGLRenderer,
         overrideMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
 }
diff --git a/types/three/examples/jsm/postprocessing/SSRPass.d.ts b/types/three/examples/jsm/postprocessing/SSRPass.d.ts
index 8238a8e36..97136e071 100644
--- a/types/three/examples/jsm/postprocessing/SSRPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/SSRPass.d.ts
@@ -10,6 +10,7 @@ import {
     TextureEncoding,
     Mesh,
     Material,
+    ColorRepresentation,
 } from '../../../src/Three';
 import { Pass, FullScreenQuad } from '../postprocessing/Pass';
 import { Reflector } from '../objects/ReflectorForSSRPass';
@@ -105,23 +106,23 @@ export class SSRPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderOverride: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderMetalness: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 }
diff --git a/types/three/examples/jsm/postprocessing/SSRrPass.d.ts b/types/three/examples/jsm/postprocessing/SSRrPass.d.ts
index ab45978c7..7b2ac7bce 100644
--- a/types/three/examples/jsm/postprocessing/SSRrPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/SSRrPass.d.ts
@@ -22,6 +22,7 @@ import {
     Mesh,
     TextureEncoding,
     Material,
+    ColorRepresentation,
 } from '../../../src/Three';
 import { Pass, FullScreenQuad } from './Pass';
 import { SSRrShader, SSRrDepthShader } from '../shaders/SSRrShader';
@@ -101,24 +102,24 @@ export class SSRrPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderOverride: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderRefractive: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     setSize: (width: number, height: number) => void;
diff --git a/types/three/examples/jsm/postprocessing/TAARenderPass.d.ts b/types/three/examples/jsm/postprocessing/TAARenderPass.d.ts
index 19e34f05c..715312cdd 100644
--- a/types/three/examples/jsm/postprocessing/TAARenderPass.d.ts
+++ b/types/three/examples/jsm/postprocessing/TAARenderPass.d.ts
@@ -1,8 +1,8 @@
-import { Scene, Camera, Color } from '../../../src/Three';
+import { Scene, Camera, ColorRepresentation } from '../../../src/Three';
 
 import { SSAARenderPass } from './SSAARenderPass';
 
 export class TAARenderPass extends SSAARenderPass {
-    constructor(scene: Scene, camera: Camera, clearColor: Color | string | number, clearAlpha: number);
+    constructor(scene: Scene, camera: Camera, clearColor: ColorRepresentation, clearAlpha: number);
     accumulate: boolean;
 }
diff --git a/types/three/src/Three.d.ts b/types/three/src/Three.d.ts
index 225a17483..c1977e344 100644
--- a/types/three/src/Three.d.ts
+++ b/types/three/src/Three.d.ts
@@ -3,6 +3,7 @@
  */
 export * from './constants';
 export * from './Three.Legacy';
+export * from './utils';
 /**
  * Animation
  */
diff --git a/types/three/src/helpers/ArrowHelper.d.ts b/types/three/src/helpers/ArrowHelper.d.ts
index 9d25187f7..038070016 100644
--- a/types/three/src/helpers/ArrowHelper.d.ts
+++ b/types/three/src/helpers/ArrowHelper.d.ts
@@ -1,8 +1,8 @@
 import { Vector3 } from './../math/Vector3';
 import { Line } from './../objects/Line';
 import { Mesh } from './../objects/Mesh';
-import { Color } from './../math/Color';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 // Extras / Helpers /////////////////////////////////////////////////////////////////////
 
@@ -19,7 +19,7 @@ export class ArrowHelper extends Object3D {
         dir?: Vector3,
         origin?: Vector3,
         length?: number,
-        color?: Color | string | number,
+        color?: ColorRepresentation,
         headLength?: number,
         headWidth?: number,
     );
@@ -54,5 +54,5 @@ export class ArrowHelper extends Object3D {
     /**
      * @param color The desired color.
      */
-    setColor(color: Color | string | number): void;
+    setColor(color: ColorRepresentation): void;
 }
diff --git a/types/three/src/helpers/BoxHelper.d.ts b/types/three/src/helpers/BoxHelper.d.ts
index 64c61c07d..e5bdf1844 100644
--- a/types/three/src/helpers/BoxHelper.d.ts
+++ b/types/three/src/helpers/BoxHelper.d.ts
@@ -1,5 +1,5 @@
+import { ColorRepresentation } from '../utils';
 import { Object3D } from './../core/Object3D';
-import { Color } from './../math/Color';
 import { LineSegments } from './../objects/LineSegments';
 
 export class BoxHelper extends LineSegments {
@@ -7,7 +7,7 @@ export class BoxHelper extends LineSegments {
      * @param object
      * @param [color=0xffff00]
      */
-    constructor(object: Object3D, color?: Color | string | number);
+    constructor(object: Object3D, color?: ColorRepresentation);
 
     /**
      * @default 'BoxHelper'
diff --git a/types/three/src/helpers/DirectionalLightHelper.d.ts b/types/three/src/helpers/DirectionalLightHelper.d.ts
index bfd7c56c2..5b564b3bf 100644
--- a/types/three/src/helpers/DirectionalLightHelper.d.ts
+++ b/types/three/src/helpers/DirectionalLightHelper.d.ts
@@ -1,8 +1,8 @@
 import { DirectionalLight } from './../lights/DirectionalLight';
-import { Color } from './../math/Color';
 import { Line } from './../objects/Line';
 import { Matrix4 } from './../math/Matrix4';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class DirectionalLightHelper extends Object3D {
     /**
@@ -10,7 +10,7 @@ export class DirectionalLightHelper extends Object3D {
      * @param [size=1]
      * @param color
      */
-    constructor(light: DirectionalLight, size?: number, color?: Color | string | number);
+    constructor(light: DirectionalLight, size?: number, color?: ColorRepresentation);
 
     light: DirectionalLight;
     lightPlane: Line;
@@ -19,7 +19,7 @@ export class DirectionalLightHelper extends Object3D {
     /**
      * @default undefined
      */
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
     matrix: Matrix4;
 
     /**
diff --git a/types/three/src/helpers/GridHelper.d.ts b/types/three/src/helpers/GridHelper.d.ts
index 5241eec5d..8a0f29b42 100644
--- a/types/three/src/helpers/GridHelper.d.ts
+++ b/types/three/src/helpers/GridHelper.d.ts
@@ -1,4 +1,4 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { LineSegments } from './../objects/LineSegments';
 
 export class GridHelper extends LineSegments {
@@ -8,7 +8,7 @@ export class GridHelper extends LineSegments {
      * @param [color1=0x444444]
      * @param [color2=0x888888]
      */
-    constructor(size?: number, divisions?: number, color1?: Color | string | number, color2?: Color | string | number);
+    constructor(size?: number, divisions?: number, color1?: ColorRepresentation, color2?: ColorRepresentation);
 
     /**
      * @default 'GridHelper'
@@ -18,5 +18,5 @@ export class GridHelper extends LineSegments {
     /**
      * @deprecated Colors should be specified in the constructor.
      */
-    setColors(color1?: Color | string | number, color2?: Color | string | number): void;
+    setColors(color1?: ColorRepresentation, color2?: ColorRepresentation): void;
 }
diff --git a/types/three/src/helpers/HemisphereLightHelper.d.ts b/types/three/src/helpers/HemisphereLightHelper.d.ts
index 61d705d38..9ddb3e095 100644
--- a/types/three/src/helpers/HemisphereLightHelper.d.ts
+++ b/types/three/src/helpers/HemisphereLightHelper.d.ts
@@ -3,16 +3,17 @@ import { Color } from './../math/Color';
 import { Matrix4 } from './../math/Matrix4';
 import { MeshBasicMaterial } from './../materials/MeshBasicMaterial';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class HemisphereLightHelper extends Object3D {
-    constructor(light: HemisphereLight, size: number, color?: Color | number | string);
+    constructor(light: HemisphereLight, size: number, color?: ColorRepresentation);
 
     light: HemisphereLight;
     matrix: Matrix4;
     matrixAutoUpdate: boolean;
     material: MeshBasicMaterial;
 
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
 
     dispose(): void;
     update(): void;
diff --git a/types/three/src/helpers/PointLightHelper.d.ts b/types/three/src/helpers/PointLightHelper.d.ts
index db11333c5..294ef2705 100644
--- a/types/three/src/helpers/PointLightHelper.d.ts
+++ b/types/three/src/helpers/PointLightHelper.d.ts
@@ -1,10 +1,10 @@
 import { PointLight } from './../lights/PointLight';
-import { Color } from './../math/Color';
 import { Matrix4 } from './../math/Matrix4';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class PointLightHelper extends Object3D {
-    constructor(light: PointLight, sphereSize?: number, color?: Color | string | number);
+    constructor(light: PointLight, sphereSize?: number, color?: ColorRepresentation);
 
     /**
      * @default 'PointLightHelper'
@@ -12,7 +12,7 @@ export class PointLightHelper extends Object3D {
     type: string;
 
     light: PointLight;
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
     matrix: Matrix4;
 
     /**
diff --git a/types/three/src/helpers/PolarGridHelper.d.ts b/types/three/src/helpers/PolarGridHelper.d.ts
index 71350587c..43ac02617 100644
--- a/types/three/src/helpers/PolarGridHelper.d.ts
+++ b/types/three/src/helpers/PolarGridHelper.d.ts
@@ -1,5 +1,5 @@
 import { LineSegments } from '../objects/LineSegments';
-import { Color } from '../math/Color';
+import { ColorRepresentation } from '../utils';
 
 export class PolarGridHelper extends LineSegments {
     /**
@@ -15,8 +15,8 @@ export class PolarGridHelper extends LineSegments {
         radials?: number,
         circles?: number,
         divisions?: number,
-        color1?: Color | string | number,
-        color2?: Color | string | number,
+        color1?: ColorRepresentation,
+        color2?: ColorRepresentation,
     );
 
     /**
diff --git a/types/three/src/helpers/SpotLightHelper.d.ts b/types/three/src/helpers/SpotLightHelper.d.ts
index 6ba791d06..855d185eb 100644
--- a/types/three/src/helpers/SpotLightHelper.d.ts
+++ b/types/three/src/helpers/SpotLightHelper.d.ts
@@ -1,11 +1,11 @@
 import { Light } from './../lights/Light';
-import { Color } from './../math/Color';
 import { Matrix4 } from './../math/Matrix4';
 import { Object3D } from './../core/Object3D';
 import { LineSegments } from '../objects/LineSegments';
+import { ColorRepresentation } from '../utils';
 
 export class SpotLightHelper extends Object3D {
-    constructor(light: Light, color?: Color | string | number);
+    constructor(light: Light, color?: ColorRepresentation);
 
     light: Light;
     matrix: Matrix4;
@@ -14,7 +14,7 @@ export class SpotLightHelper extends Object3D {
      * @default false
      */
     matrixAutoUpdate: boolean;
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
     cone: LineSegments;
 
     dispose(): void;
diff --git a/types/three/src/lights/AmbientLight.d.ts b/types/three/src/lights/AmbientLight.d.ts
index 583ea58a8..ea26f781c 100644
--- a/types/three/src/lights/AmbientLight.d.ts
+++ b/types/three/src/lights/AmbientLight.d.ts
@@ -1,4 +1,4 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { Light } from './Light';
 
 /**
@@ -12,7 +12,7 @@ export class AmbientLight extends Light {
      * @param color Numeric value of the RGB component of the color or a Color instance.
      * @param [intensity=1]
      */
-    constructor(color?: Color | string | number, intensity?: number);
+    constructor(color?: ColorRepresentation, intensity?: number);
 
     /**
      * @default 'AmbientLight'
diff --git a/types/three/src/lights/AmbientLightProbe.d.ts b/types/three/src/lights/AmbientLightProbe.d.ts
index 4ff674704..ff61de919 100644
--- a/types/three/src/lights/AmbientLightProbe.d.ts
+++ b/types/three/src/lights/AmbientLightProbe.d.ts
@@ -1,8 +1,8 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { LightProbe } from './LightProbe';
 
 export class AmbientLightProbe extends LightProbe {
-    constructor(color?: Color | string | number, intensity?: number);
+    constructor(color?: ColorRepresentation, intensity?: number);
 
     readonly isAmbientLightProbe: true;
 }
diff --git a/types/three/src/lights/DirectionalLight.d.ts b/types/three/src/lights/DirectionalLight.d.ts
index e88b95e51..84bb379ad 100644
--- a/types/three/src/lights/DirectionalLight.d.ts
+++ b/types/three/src/lights/DirectionalLight.d.ts
@@ -1,8 +1,8 @@
-import { Color } from './../math/Color';
 import { Object3D } from './../core/Object3D';
 import { DirectionalLightShadow } from './DirectionalLightShadow';
 import { Light } from './Light';
 import { Vector3 } from '../math/Vector3';
+import { ColorRepresentation } from '../utils';
 
 /**
  * see {@link https://github.com/mrdoob/three.js/blob/master/src/lights/DirectionalLight.js|src/lights/DirectionalLight.js}
@@ -14,7 +14,7 @@ import { Vector3 } from '../math/Vector3';
  * scene.add( directionalLight );
  */
 export class DirectionalLight extends Light {
-    constructor(color?: Color | string | number, intensity?: number);
+    constructor(color?: ColorRepresentation, intensity?: number);
 
     /**
      * @default 'DirectionalLight'
diff --git a/types/three/src/lights/HemisphereLight.d.ts b/types/three/src/lights/HemisphereLight.d.ts
index aa8d6655a..0b830798d 100644
--- a/types/three/src/lights/HemisphereLight.d.ts
+++ b/types/three/src/lights/HemisphereLight.d.ts
@@ -1,6 +1,7 @@
 import { Color } from './../math/Color';
 import { Vector3 } from '../math/Vector3';
 import { Light } from './Light';
+import { ColorRepresentation } from '../utils';
 
 export class HemisphereLight extends Light {
     /**
@@ -8,7 +9,7 @@ export class HemisphereLight extends Light {
      * @param groundColor
      * @param [intensity=1]
      */
-    constructor(skyColor?: Color | string | number, groundColor?: Color | string | number, intensity?: number);
+    constructor(skyColor?: ColorRepresentation, groundColor?: ColorRepresentation, intensity?: number);
 
     /**
      * @default 'HemisphereLight'
diff --git a/types/three/src/lights/HemisphereLightProbe.d.ts b/types/three/src/lights/HemisphereLightProbe.d.ts
index 7b74861ef..5d5224a49 100644
--- a/types/three/src/lights/HemisphereLightProbe.d.ts
+++ b/types/three/src/lights/HemisphereLightProbe.d.ts
@@ -1,8 +1,8 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { LightProbe } from './LightProbe';
 
 export class HemisphereLightProbe extends LightProbe {
-    constructor(skyColor?: Color | string | number, groundColor?: Color | string | number, intensity?: number);
+    constructor(skyColor?: ColorRepresentation, groundColor?: ColorRepresentation, intensity?: number);
 
     readonly isHemisphereLightProbe: true;
 }
diff --git a/types/three/src/lights/PointLight.d.ts b/types/three/src/lights/PointLight.d.ts
index 6e820ac5d..c44c4426d 100644
--- a/types/three/src/lights/PointLight.d.ts
+++ b/types/three/src/lights/PointLight.d.ts
@@ -1,4 +1,4 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { Light } from './Light';
 import { PointLightShadow } from './PointLightShadow';
 
@@ -9,7 +9,7 @@ import { PointLightShadow } from './PointLightShadow';
  * scene.add( light );
  */
 export class PointLight extends Light {
-    constructor(color?: Color | string | number, intensity?: number, distance?: number, decay?: number);
+    constructor(color?: ColorRepresentation, intensity?: number, distance?: number, decay?: number);
 
     /**
      * @default 'PointLight'
diff --git a/types/three/src/lights/RectAreaLight.d.ts b/types/three/src/lights/RectAreaLight.d.ts
index 2c479f873..cc08ce1d5 100644
--- a/types/three/src/lights/RectAreaLight.d.ts
+++ b/types/three/src/lights/RectAreaLight.d.ts
@@ -1,8 +1,8 @@
 import { Light } from './Light';
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 
 export class RectAreaLight extends Light {
-    constructor(color?: Color | string | number, intensity?: number, width?: number, height?: number);
+    constructor(color?: ColorRepresentation, intensity?: number, width?: number, height?: number);
 
     /**
      * @default 'RectAreaLight'
diff --git a/types/three/src/lights/SpotLight.d.ts b/types/three/src/lights/SpotLight.d.ts
index bf214ebcc..562894ec3 100644
--- a/types/three/src/lights/SpotLight.d.ts
+++ b/types/three/src/lights/SpotLight.d.ts
@@ -3,13 +3,14 @@ import { Vector3 } from '../math/Vector3';
 import { Object3D } from './../core/Object3D';
 import { SpotLightShadow } from './SpotLightShadow';
 import { Light } from './Light';
+import { ColorRepresentation } from '../utils';
 
 /**
  * A point light that can cast shadow in one direction.
  */
 export class SpotLight extends Light {
     constructor(
-        color?: Color | string | number,
+        color?: ColorRepresentation,
         intensity?: number,
         distance?: number,
         angle?: number,
diff --git a/types/three/src/materials/LineBasicMaterial.d.ts b/types/three/src/materials/LineBasicMaterial.d.ts
index 03b1e8ac0..0eff8c56d 100644
--- a/types/three/src/materials/LineBasicMaterial.d.ts
+++ b/types/three/src/materials/LineBasicMaterial.d.ts
@@ -1,8 +1,9 @@
+import { ColorRepresentation } from '../utils';
 import { Color } from './../math/Color';
 import { MaterialParameters, Material } from './Material';
 
 export interface LineBasicMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     linewidth?: number | undefined;
     linecap?: string | undefined;
     linejoin?: string | undefined;
diff --git a/types/three/src/materials/MeshBasicMaterial.d.ts b/types/three/src/materials/MeshBasicMaterial.d.ts
index 8ebb0560c..2b0d2354e 100644
--- a/types/three/src/materials/MeshBasicMaterial.d.ts
+++ b/types/three/src/materials/MeshBasicMaterial.d.ts
@@ -2,11 +2,12 @@ import { Color } from './../math/Color';
 import { Texture } from './../textures/Texture';
 import { MaterialParameters, Material } from './Material';
 import { Combine } from '../constants';
+import { ColorRepresentation } from '../utils';
 /**
  * parameters is an object with one or more properties defining the material's appearance.
  */
 export interface MeshBasicMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     opacity?: number | undefined;
     map?: Texture | null | undefined;
     lightMap?: Texture | null;
diff --git a/types/three/src/materials/MeshLambertMaterial.d.ts b/types/three/src/materials/MeshLambertMaterial.d.ts
index c41794bc7..b755d813e 100644
--- a/types/three/src/materials/MeshLambertMaterial.d.ts
+++ b/types/three/src/materials/MeshLambertMaterial.d.ts
@@ -2,10 +2,11 @@ import { Color } from './../math/Color';
 import { Texture } from './../textures/Texture';
 import { MaterialParameters, Material } from './Material';
 import { Combine } from '../constants';
+import { ColorRepresentation } from '../utils';
 
 export interface MeshLambertMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
-    emissive?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
+    emissive?: ColorRepresentation | undefined;
     emissiveIntensity?: number | undefined;
     emissiveMap?: Texture | null | undefined;
     map?: Texture | null | undefined;
diff --git a/types/three/src/materials/MeshMatcapMaterial.d.ts b/types/three/src/materials/MeshMatcapMaterial.d.ts
index 1e774f1df..21caa88e0 100644
--- a/types/three/src/materials/MeshMatcapMaterial.d.ts
+++ b/types/three/src/materials/MeshMatcapMaterial.d.ts
@@ -3,9 +3,10 @@ import { Texture } from './../textures/Texture';
 import { Vector2 } from './../math/Vector2';
 import { MaterialParameters, Material } from './Material';
 import { NormalMapTypes } from '../constants';
+import { ColorRepresentation } from '../utils';
 
 export interface MeshMatcapMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     matcap?: Texture | null | undefined;
     map?: Texture | null | undefined;
     bumpMap?: Texture | null | undefined;
diff --git a/types/three/src/materials/MeshPhongMaterial.d.ts b/types/three/src/materials/MeshPhongMaterial.d.ts
index 7870f5f6a..2c5178054 100644
--- a/types/three/src/materials/MeshPhongMaterial.d.ts
+++ b/types/three/src/materials/MeshPhongMaterial.d.ts
@@ -3,11 +3,12 @@ import { Texture } from './../textures/Texture';
 import { Vector2 } from './../math/Vector2';
 import { MaterialParameters, Material } from './Material';
 import { Combine, NormalMapTypes } from '../constants';
+import { ColorRepresentation } from '../utils';
 
 export interface MeshPhongMaterialParameters extends MaterialParameters {
     /** geometry color in hexadecimal. Default is 0xffffff. */
-    color?: Color | string | number | undefined;
-    specular?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
+    specular?: ColorRepresentation | undefined;
     shininess?: number | undefined;
     opacity?: number | undefined;
     map?: Texture | null | undefined;
@@ -15,7 +16,7 @@ export interface MeshPhongMaterialParameters extends MaterialParameters {
     lightMapIntensity?: number | undefined;
     aoMap?: Texture | null | undefined;
     aoMapIntensity?: number | undefined;
-    emissive?: Color | string | number | undefined;
+    emissive?: ColorRepresentation | undefined;
     emissiveIntensity?: number | undefined;
     emissiveMap?: Texture | null | undefined;
     bumpMap?: Texture | null | undefined;
diff --git a/types/three/src/materials/MeshStandardMaterial.d.ts b/types/three/src/materials/MeshStandardMaterial.d.ts
index 3cbc7dd79..b4c419f6a 100644
--- a/types/three/src/materials/MeshStandardMaterial.d.ts
+++ b/types/three/src/materials/MeshStandardMaterial.d.ts
@@ -3,9 +3,10 @@ import { Texture } from './../textures/Texture';
 import { Vector2 } from './../math/Vector2';
 import { MaterialParameters, Material } from './Material';
 import { NormalMapTypes } from '../constants';
+import { ColorRepresentation } from '../utils';
 
 export interface MeshStandardMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     roughness?: number | undefined;
     metalness?: number | undefined;
     map?: Texture | null | undefined;
@@ -13,7 +14,7 @@ export interface MeshStandardMaterialParameters extends MaterialParameters {
     lightMapIntensity?: number | undefined;
     aoMap?: Texture | null | undefined;
     aoMapIntensity?: number | undefined;
-    emissive?: Color | string | number | undefined;
+    emissive?: ColorRepresentation | undefined;
     emissiveIntensity?: number | undefined;
     emissiveMap?: Texture | null | undefined;
     bumpMap?: Texture | null | undefined;
diff --git a/types/three/src/materials/MeshToonMaterial.d.ts b/types/three/src/materials/MeshToonMaterial.d.ts
index 83d270a99..a23a92ec7 100644
--- a/types/three/src/materials/MeshToonMaterial.d.ts
+++ b/types/three/src/materials/MeshToonMaterial.d.ts
@@ -3,10 +3,11 @@ import { Texture } from './../textures/Texture';
 import { Vector2 } from './../math/Vector2';
 import { MaterialParameters, Material } from './Material';
 import { NormalMapTypes } from '../constants';
+import { ColorRepresentation } from '../utils';
 
 export interface MeshToonMaterialParameters extends MaterialParameters {
     /** geometry color in hexadecimal. Default is 0xffffff. */
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     opacity?: number | undefined;
     gradientMap?: Texture | null | undefined;
     map?: Texture | null | undefined;
@@ -14,7 +15,7 @@ export interface MeshToonMaterialParameters extends MaterialParameters {
     lightMapIntensity?: number | undefined;
     aoMap?: Texture | null | undefined;
     aoMapIntensity?: number | undefined;
-    emissive?: Color | string | number | undefined;
+    emissive?: ColorRepresentation | undefined;
     emissiveIntensity?: number | undefined;
     emissiveMap?: Texture | null | undefined;
     bumpMap?: Texture | null | undefined;
diff --git a/types/three/src/materials/PointsMaterial.d.ts b/types/three/src/materials/PointsMaterial.d.ts
index e8eae07b2..aa1005f4c 100644
--- a/types/three/src/materials/PointsMaterial.d.ts
+++ b/types/three/src/materials/PointsMaterial.d.ts
@@ -1,9 +1,10 @@
 import { Material, MaterialParameters } from './Material';
 import { Color } from './../math/Color';
 import { Texture } from './../textures/Texture';
+import { ColorRepresentation } from '../utils';
 
 export interface PointsMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     map?: Texture | null | undefined;
     alphaMap?: Texture | null | undefined;
     size?: number | undefined;
diff --git a/types/three/src/materials/ShadowMaterial.d.ts b/types/three/src/materials/ShadowMaterial.d.ts
index 44a424f13..7adfb244d 100644
--- a/types/three/src/materials/ShadowMaterial.d.ts
+++ b/types/three/src/materials/ShadowMaterial.d.ts
@@ -1,8 +1,9 @@
+import { ColorRepresentation } from '../utils';
 import { Color } from './../math/Color';
 import { MaterialParameters, Material } from './Material';
 
 export interface ShadowMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
 }
 
 export class ShadowMaterial extends Material {
diff --git a/types/three/src/materials/SpriteMaterial.d.ts b/types/three/src/materials/SpriteMaterial.d.ts
index 18c10cd94..180910c61 100644
--- a/types/three/src/materials/SpriteMaterial.d.ts
+++ b/types/three/src/materials/SpriteMaterial.d.ts
@@ -1,9 +1,10 @@
+import { ColorRepresentation } from '../utils';
 import { Color } from './../math/Color';
 import { Texture } from './../textures/Texture';
 import { MaterialParameters, Material } from './Material';
 
 export interface SpriteMaterialParameters extends MaterialParameters {
-    color?: Color | string | number | undefined;
+    color?: ColorRepresentation | undefined;
     map?: Texture | null | undefined;
     alphaMap?: Texture | null | undefined;
     rotation?: number | undefined;
diff --git a/types/three/src/math/Color.d.ts b/types/three/src/math/Color.d.ts
index 8af80c0fb..ec642c5be 100644
--- a/types/three/src/math/Color.d.ts
+++ b/types/three/src/math/Color.d.ts
@@ -1,3 +1,4 @@
+import { ColorRepresentation } from '../utils';
 import { BufferAttribute } from './../core/BufferAttribute';
 
 export interface HSL {
@@ -15,7 +16,7 @@ export interface HSL {
  * const color = new THREE.Color( 0xff0000 );
  */
 export class Color {
-    constructor(color?: Color | string | number);
+    constructor(color?: ColorRepresentation);
     constructor(r: number, g: number, b: number);
 
     readonly isColor: true;
@@ -38,7 +39,7 @@ export class Color {
      */
     b: number;
 
-    set(color: Color | string | number): Color;
+    set(color: ColorRepresentation): Color;
     setScalar(scalar: number): Color;
     setHex(hex: number): Color;
 
diff --git a/types/three/src/renderers/WebGLRenderer.d.ts b/types/three/src/renderers/WebGLRenderer.d.ts
index 84b9f9dfc..dddf31779 100644
--- a/types/three/src/renderers/WebGLRenderer.d.ts
+++ b/types/three/src/renderers/WebGLRenderer.d.ts
@@ -23,6 +23,7 @@ import { XRAnimationLoopCallback } from './webxr/WebXR';
 import { Vector3 } from '../math/Vector3';
 import { Box3 } from '../math/Box3';
 import { DataTexture2DArray } from '../textures/DataTexture2DArray';
+import { ColorRepresentation } from '../utils';
 
 export interface Renderer {
     domElement: HTMLCanvasElement;
@@ -291,7 +292,7 @@ export class WebGLRenderer implements Renderer {
     /**
      * Sets the clear color, using color for the color and alpha for the opacity.
      */
-    setClearColor(color: Color | string | number, alpha?: number): void;
+    setClearColor(color: ColorRepresentation, alpha?: number): void;
 
     /**
      * Returns a float with the current clear alpha. Ranges from 0 to 1.
diff --git a/types/three/src/scenes/Fog.d.ts b/types/three/src/scenes/Fog.d.ts
index 29b81ff0d..ecd1ebaed 100644
--- a/types/three/src/scenes/Fog.d.ts
+++ b/types/three/src/scenes/Fog.d.ts
@@ -1,3 +1,4 @@
+import { ColorRepresentation } from '../utils';
 import { Color } from './../math/Color';
 
 export interface FogBase {
@@ -11,7 +12,7 @@ export interface FogBase {
  * This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.
  */
 export class Fog implements FogBase {
-    constructor(color: Color | number | string, near?: number, far?: number);
+    constructor(color: ColorRepresentation, near?: number, far?: number);
 
     /**
      * @default ''
diff --git a/types/three/src/utils.d.ts b/types/three/src/utils.d.ts
new file mode 100644
index 000000000..16c1d366a
--- /dev/null
+++ b/types/three/src/utils.d.ts
@@ -0,0 +1,3 @@
+import { Color } from './math/Color';
+
+export type ColorRepresentation = Color | string | number;