diff --git a/package.json b/package.json
index 2b797f4..81526f8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cesium-use",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": false,
   "description": "Vue powered CesiumJS utility library",
   "author": "s3xysteak",
diff --git a/src/core/composables/useWaterPlane/demo.vue b/src/core/composables/useWaterPlane/demo.vue
index 52bbade..4338976 100644
--- a/src/core/composables/useWaterPlane/demo.vue
+++ b/src/core/composables/useWaterPlane/demo.vue
@@ -3,7 +3,7 @@ import { reactive, watchEffect } from 'vue'
 import * as Cesium from 'cesium'
 import WaterImage from './waterNormals.jpg'
 import { useWaterPlane } from '.'
-import { useViewer } from '~/index'
+import { useViewer, defineColor } from '~/index'
 
 const viewer = useViewer()
 
@@ -50,6 +50,7 @@ const form = reactive({
   height: 10,
   reflectivity: 0.15,
   rippleSize: 100,
+  waterColor: '#020E12',
   waterAlpha: 0.9,
   distortionScale: 10,
 })
@@ -57,6 +58,7 @@ watchEffect(() => {
   primitive.height = form.height
   primitive.reflectivity = form.reflectivity
   primitive.rippleSize = form.rippleSize
+  primitive.waterColor = defineColor(form.waterColor)
   primitive.waterAlpha = form.waterAlpha
   primitive.distortionScale = form.distortionScale
 })
@@ -80,6 +82,10 @@ function toggleShow() {
       rippleSize:
       <input v-model="form.rippleSize" input type="number">
     </label>
+    <label>
+      waterColor:
+      <input v-model="form.waterColor" input type="color">
+    </label>
     <label>
       waterAlpha:
       <input v-model="form.waterAlpha" input step="0.05" max="1" min="0" type="number">
diff --git a/src/core/composables/useWaterPlane/index-zh.md b/src/core/composables/useWaterPlane/index-zh.md
index 4a635a1..3b0050a 100644
--- a/src/core/composables/useWaterPlane/index-zh.md
+++ b/src/core/composables/useWaterPlane/index-zh.md
@@ -21,6 +21,7 @@ const form = reactive({
   height: 10,
   reflectivity: 0.15,
   rippleSize: 100,
+  waterColor: '#020E12',
   waterAlpha: 0.9,
   distortionScale: 10,
 })
@@ -28,6 +29,7 @@ watchEffect(() => {
   primitive.height = form.height
   primitive.reflectivity = form.reflectivity
   primitive.rippleSize = form.rippleSize
+  primitive.waterColor = defineColor(form.waterColor)
   primitive.waterAlpha = form.waterAlpha
   primitive.distortionScale = form.distortionScale
 })
diff --git a/src/core/composables/useWaterPlane/index.md b/src/core/composables/useWaterPlane/index.md
index a93eff8..1485ab5 100644
--- a/src/core/composables/useWaterPlane/index.md
+++ b/src/core/composables/useWaterPlane/index.md
@@ -21,6 +21,7 @@ const form = reactive({
   height: 10,
   reflectivity: 0.15,
   rippleSize: 100,
+  waterColor: '#020E12',
   waterAlpha: 0.9,
   distortionScale: 10,
 })
@@ -28,6 +29,7 @@ watchEffect(() => {
   primitive.height = form.height
   primitive.reflectivity = form.reflectivity
   primitive.rippleSize = form.rippleSize
+  primitive.waterColor = defineColor(form.waterColor)
   primitive.waterAlpha = form.waterAlpha
   primitive.distortionScale = form.distortionScale
 })
diff --git a/src/core/composables/useWaterPlane/index.ts b/src/core/composables/useWaterPlane/index.ts
index 6d2d098..6f7cd73 100644
--- a/src/core/composables/useWaterPlane/index.ts
+++ b/src/core/composables/useWaterPlane/index.ts
@@ -261,6 +261,14 @@ class WaterPrimitive {
     this._material!.uniforms.size = val
   }
 
+  get waterColor() {
+    return this._material!.uniforms.waterColor
+  }
+
+  set waterColor(val) {
+    this._material!.uniforms.waterColor = val
+  }
+
   get waterAlpha() {
     return this._material!.uniforms.waterAlpha
   }