diff --git a/src/renderer/wg_engine/tvgWgPipelineImage.cpp b/src/renderer/wg_engine/tvgWgPipelineImage.cpp
index 23564990..8af7e003 100644
--- a/src/renderer/wg_engine/tvgWgPipelineImage.cpp
+++ b/src/renderer/wg_engine/tvgWgPipelineImage.cpp
@@ -27,11 +27,12 @@
 // WgPipelineDataImage
 //************************************************************************
 
+void WgPipelineDataImage::updateFormat(const ColorSpace format) {
+    uColorInfo.format = (uint32_t)format;
+}
+
 void WgPipelineDataImage::updateOpacity(const uint8_t opacity) {
-    uColorInfo.color[0] = 1.0f; // red
-    uColorInfo.color[1] = 1.0f; // green
-    uColorInfo.color[2] = 1.0f; // blue
-    uColorInfo.color[3] = opacity / 255.0f; // alpha
+    uColorInfo.opacity = opacity / 255.0f; // alpha
 }
 
 //************************************************************************
diff --git a/src/renderer/wg_engine/tvgWgPipelineImage.h b/src/renderer/wg_engine/tvgWgPipelineImage.h
index ad527ce1..1abf72bb 100644
--- a/src/renderer/wg_engine/tvgWgPipelineImage.h
+++ b/src/renderer/wg_engine/tvgWgPipelineImage.h
@@ -28,12 +28,16 @@
 class WgPipelineImage;
 
 struct WgPipelineImageColorInfo {
-    float color[4]{};
+    uint32_t format{};
+    float dummy0{};
+    float dummy1{};
+    float opacity{};
 };
 
 struct WgPipelineDataImage: WgPipelineData {
     WgPipelineImageColorInfo uColorInfo{}; // @binding(1)
 
+    void updateFormat(const ColorSpace format);
     void updateOpacity(const uint8_t opacity);
 };
 
diff --git a/src/renderer/wg_engine/tvgWgRenderer.cpp b/src/renderer/wg_engine/tvgWgRenderer.cpp
index 4f9b5a95..5cee42c3 100644
--- a/src/renderer/wg_engine/tvgWgRenderer.cpp
+++ b/src/renderer/wg_engine/tvgWgRenderer.cpp
@@ -189,6 +189,7 @@ RenderData WgRenderer::prepare(Surface* surface, const RenderMesh* mesh, RenderD
     if (flags & (RenderUpdateFlag::Color | RenderUpdateFlag::Image | RenderUpdateFlag::Transform)) {
         WgPipelineDataImage pipelineDataImage{};
         pipelineDataImage.updateMatrix(mViewMatrix, transform);
+        pipelineDataImage.updateFormat(surface->cs);
         pipelineDataImage.updateOpacity(opacity);
         renderDataShape->mPipelineBindGroupImage.update(mQueue, pipelineDataImage, surface);
         renderDataShape->tesselate(mDevice, mQueue, surface, mesh);
diff --git a/src/renderer/wg_engine/tvgWgShaderSrc.cpp b/src/renderer/wg_engine/tvgWgShaderSrc.cpp
index 128f88fe..5978ad80 100644
--- a/src/renderer/wg_engine/tvgWgShaderSrc.cpp
+++ b/src/renderer/wg_engine/tvgWgShaderSrc.cpp
@@ -281,7 +281,10 @@ struct Matrix {
 
 // ColorInfo
 struct ColorInfo {
-    color: vec4f
+    format: u32,
+    dummy0: f32,
+    dummy1: f32,
+    opacity: f32
 };
 
 // vertex output
@@ -312,5 +315,14 @@ fn vs_main(in: VertexInput) -> VertexOutput {
 @fragment
 fn fs_main(in: VertexOutput) -> @location(0) vec4f {
     var color: vec4f = textureSample(uTextureViewBase, uSamplerBase, in.texCoords.xy);
-    return vec4f(color.rgb, color.a * uColorInfo.color.a);
+    var result: vec4f = color;
+    var format: u32 = uColorInfo.format;
+    if (format == 1u) { /* FMT_ARGB8888 */
+        result = color.bgra;
+    } else if (format == 2u) { /* FMT_ABGR8888S */
+        result = vec4(color.rgb * color.a, color.a);
+    } else if (format == 3u) { /* FMT_ARGB8888S */
+        result = vec4(color.bgr * color.a, color.a);
+    }
+    return vec4f(result.rgb, result.a * uColorInfo.opacity);
 })";