diff --git a/examples/blob.rs b/examples/blob.rs
index 43f2d885a6..3552289809 100644
--- a/examples/blob.rs
+++ b/examples/blob.rs
@@ -17,7 +17,7 @@ use rayon::prelude::*;
 use std::collections::HashMap;
 use std::sync::Arc;
 use webrender::api::{self, DisplayListBuilder, DocumentId, PipelineId, RenderApi, Transaction};
-use webrender::api::{DeviceUintRect, DeviceUintPoint};
+use webrender::api::{ColorF, DeviceUintRect, DeviceUintPoint};
 
 // This example shows how to implement a very basic BlobImageHandler that can only render
 // a checkerboard pattern.
@@ -229,6 +229,7 @@ impl Example for App {
             api::ImageRendering::Auto,
             api::AlphaType::PremultipliedAlpha,
             blob_img1,
+            ColorF::WHITE,
         );
 
         let info = api::LayoutPrimitiveInfo::new((600, 600).by(200, 200));
@@ -239,6 +240,7 @@ impl Example for App {
             api::ImageRendering::Auto,
             api::AlphaType::PremultipliedAlpha,
             blob_img2,
+            ColorF::WHITE,
         );
 
         builder.pop_stacking_context();
diff --git a/examples/frame_output.rs b/examples/frame_output.rs
index 63c3d72df2..5e845a1208 100644
--- a/examples/frame_output.rs
+++ b/examples/frame_output.rs
@@ -165,7 +165,8 @@ impl Example for App {
             LayoutSize::zero(),
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
-            self.external_image_key.unwrap()
+            self.external_image_key.unwrap(),
+            ColorF::WHITE,
         );
 
         builder.pop_stacking_context();
diff --git a/examples/image_resize.rs b/examples/image_resize.rs
index a5a156f564..26265709a2 100644
--- a/examples/image_resize.rs
+++ b/examples/image_resize.rs
@@ -61,6 +61,7 @@ impl Example for App {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             self.image_key,
+            ColorF::WHITE,
         );
 
         let info = LayoutPrimitiveInfo::with_clip_rect(
@@ -74,6 +75,7 @@ impl Example for App {
             ImageRendering::Pixelated,
             AlphaType::PremultipliedAlpha,
             self.image_key,
+            ColorF::WHITE,
         );
 
         builder.pop_stacking_context();
diff --git a/examples/texture_cache_stress.rs b/examples/texture_cache_stress.rs
index a895273f23..e3356ca796 100644
--- a/examples/texture_cache_stress.rs
+++ b/examples/texture_cache_stress.rs
@@ -146,6 +146,7 @@ impl Example for App {
                 ImageRendering::Auto,
                 AlphaType::PremultipliedAlpha,
                 *key,
+                ColorF::WHITE,
             );
         }
 
@@ -162,6 +163,7 @@ impl Example for App {
                 ImageRendering::Auto,
                 AlphaType::PremultipliedAlpha,
                 image_key,
+                ColorF::WHITE,
             );
         }
 
@@ -178,6 +180,7 @@ impl Example for App {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             swap_key,
+            ColorF::WHITE,
         );
         self.swap_index = 1 - self.swap_index;
 
diff --git a/webrender/res/brush_image.glsl b/webrender/res/brush_image.glsl
index 5356036cb4..1ebc5a1da8 100644
--- a/webrender/res/brush_image.glsl
+++ b/webrender/res/brush_image.glsl
@@ -175,6 +175,7 @@ void brush_vs(
             break;
         case COLOR_MODE_SUBPX_BG_PASS2:
         case COLOR_MODE_SUBPX_DUAL_SOURCE:
+        case COLOR_MODE_IMAGE:
             vMaskSwizzle = vec2(1.0, 0.0);
             vColor = image_data.color;
             break;
diff --git a/webrender/res/prim_shared.glsl b/webrender/res/prim_shared.glsl
index 0b09753b7a..616ec34f0c 100644
--- a/webrender/res/prim_shared.glsl
+++ b/webrender/res/prim_shared.glsl
@@ -42,6 +42,7 @@ varying vec4 vClipMaskUv;
 #define COLOR_MODE_SUBPX_DUAL_SOURCE  6
 #define COLOR_MODE_BITMAP             7
 #define COLOR_MODE_COLOR_BITMAP       8
+#define COLOR_MODE_IMAGE              9
 
 uniform HIGHP_SAMPLER_FLOAT sampler2D sPrimitiveHeadersF;
 uniform HIGHP_SAMPLER_FLOAT isampler2D sPrimitiveHeadersI;
diff --git a/webrender/src/batch.rs b/webrender/src/batch.rs
index 03f419501d..98d75bfab9 100644
--- a/webrender/src/batch.rs
+++ b/webrender/src/batch.rs
@@ -723,7 +723,7 @@ impl AlphaBatchBuilder {
                                                 let batch = self.batch_list.get_suitable_batch(key, &task_relative_bounding_rect);
                                                 let prim_header_index = prim_headers.push(&prim_header, [
                                                     uv_rect_address.as_int(),
-                                                    (ShaderColorMode::ColorBitmap as i32) << 16 |
+                                                    (ShaderColorMode::Image as i32) << 16 |
                                                     RasterizationSpace::Screen as i32,
                                                     0,
                                                 ]);
@@ -786,7 +786,7 @@ impl AlphaBatchBuilder {
 
                                             let content_prim_header_index = prim_headers.push(&prim_header, [
                                                 content_uv_rect_address,
-                                                (ShaderColorMode::ColorBitmap as i32) << 16 |
+                                                (ShaderColorMode::Image as i32) << 16 |
                                                 RasterizationSpace::Screen as i32,
                                                 0,
                                             ]);
@@ -971,7 +971,7 @@ impl AlphaBatchBuilder {
                                     .as_int();
                                 let prim_header_index = prim_headers.push(&prim_header, [
                                     uv_rect_address,
-                                    (ShaderColorMode::ColorBitmap as i32) << 16 |
+                                    (ShaderColorMode::Image as i32) << 16 |
                                     RasterizationSpace::Screen as i32,
                                     0,
                                 ]);
@@ -1373,7 +1373,7 @@ fn get_image_tile_params(
             textures,
             [
                 cache_item.uv_rect_handle.as_int(gpu_cache),
-                (ShaderColorMode::ColorBitmap as i32) << 16 |
+                (ShaderColorMode::Image as i32) << 16 |
                      RasterizationSpace::Local as i32,
                 0,
             ],
@@ -1423,7 +1423,7 @@ impl BrushPrimitive {
                         textures,
                         [
                             cache_item.uv_rect_handle.as_int(gpu_cache),
-                            (ShaderColorMode::ColorBitmap as i32) << 16|
+                            (ShaderColorMode::Image as i32) << 16|
                              RasterizationSpace::Local as i32,
                             0,
                         ],
@@ -1461,7 +1461,7 @@ impl BrushPrimitive {
                         textures,
                         [
                             cache_item.uv_rect_handle.as_int(gpu_cache),
-                            (ShaderColorMode::ColorBitmap as i32) << 16|
+                            (ShaderColorMode::Image as i32) << 16|
                              RasterizationSpace::Local as i32,
                             0,
                         ],
diff --git a/webrender/src/display_list_flattener.rs b/webrender/src/display_list_flattener.rs
index ea20b63f8b..8f22cf4848 100644
--- a/webrender/src/display_list_flattener.rs
+++ b/webrender/src/display_list_flattener.rs
@@ -521,6 +521,7 @@ impl<'a> DisplayListFlattener<'a> {
                     info.image_key,
                     info.image_rendering,
                     info.alpha_type,
+                    info.color,
                 );
             }
             SpecificDisplayItem::YuvImage(ref info) => {
@@ -1930,6 +1931,7 @@ impl<'a> DisplayListFlattener<'a> {
         image_key: ImageKey,
         image_rendering: ImageRendering,
         alpha_type: AlphaType,
+        color: ColorF,
     ) {
         let mut prim_rect = info.rect;
         simplify_repeated_primitive(&stretch_size, &mut tile_spacing, &mut prim_rect);
@@ -1961,6 +1963,7 @@ impl<'a> DisplayListFlattener<'a> {
                 alpha_type,
                 stretch_size,
                 tile_spacing,
+                color,
                 source: ImageSource::Default,
                 sub_rect,
                 visible_tiles: Vec::new(),
diff --git a/webrender/src/prim_store.rs b/webrender/src/prim_store.rs
index 3e42e6966c..59ea29f477 100644
--- a/webrender/src/prim_store.rs
+++ b/webrender/src/prim_store.rs
@@ -283,6 +283,7 @@ pub enum BrushKind {
         alpha_type: AlphaType,
         stretch_size: LayoutSize,
         tile_spacing: LayoutSize,
+        color: ColorF,
         source: ImageSource,
         sub_rect: Option<DeviceIntRect>,
         opacity_binding: OpacityBinding,
@@ -486,8 +487,8 @@ impl BrushPrimitive {
             }
             // Images are drawn as a white color, modulated by the total
             // opacity coming from any collapsed property bindings.
-            BrushKind::Image { stretch_size, tile_spacing, ref opacity_binding, .. } => {
-                request.push(ColorF::new(1.0, 1.0, 1.0, opacity_binding.current).premultiplied());
+            BrushKind::Image { stretch_size, tile_spacing, color, ref opacity_binding, .. } => {
+                request.push(color.scale_alpha(opacity_binding.current).premultiplied());
                 request.push(PremultipliedColorF::WHITE);
                 request.push([
                     stretch_size.width + tile_spacing.width,
@@ -2225,6 +2226,7 @@ impl Primitive {
                         request,
                         sub_rect,
                         stretch_size,
+                        color,
                         ref mut tile_spacing,
                         ref mut source,
                         ref mut opacity_binding,
@@ -2250,7 +2252,8 @@ impl Primitive {
                             // batching parameters are used.
                             metadata.opacity.is_opaque =
                                 image_properties.descriptor.is_opaque &&
-                                opacity_binding.current == 1.0;
+                                opacity_binding.current == 1.0 &&
+                                color.a == 1.0;
 
                             if *tile_spacing != LayoutSize::zero() && !is_tiled {
                                 *source = ImageSource::Cache {
diff --git a/webrender/src/renderer.rs b/webrender/src/renderer.rs
index 7453e9fbe0..6e8e603f81 100644
--- a/webrender/src/renderer.rs
+++ b/webrender/src/renderer.rs
@@ -248,6 +248,7 @@ pub enum ShaderColorMode {
     SubpixelDualSource = 6,
     Bitmap = 7,
     ColorBitmap = 8,
+    Image = 9,
 }
 
 impl From<GlyphFormat> for ShaderColorMode {
diff --git a/webrender_api/src/color.rs b/webrender_api/src/color.rs
index 40f2fa2a62..bdda69e819 100644
--- a/webrender_api/src/color.rs
+++ b/webrender_api/src/color.rs
@@ -48,6 +48,13 @@ pub struct ColorF {
 }
 
 impl ColorF {
+    ///
+    pub const BLACK: Self = ColorF { r: 0.0, g: 0.0, b: 0.0, a: 1.0 };
+    ///
+    pub const TRANSPARENT: Self = ColorF { r: 0.0, g: 0.0, b: 0.0, a: 0.0 };
+    ///
+    pub const WHITE: Self = ColorF { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
+
     /// Constructs a new `ColorF` from its components.
     pub fn new(r: f32, g: f32, b: f32, a: f32) -> Self {
         ColorF { r, g, b, a }
diff --git a/webrender_api/src/display_item.rs b/webrender_api/src/display_item.rs
index ff4ea12981..9759be2dfc 100644
--- a/webrender_api/src/display_item.rs
+++ b/webrender_api/src/display_item.rs
@@ -558,6 +558,7 @@ pub struct ImageDisplayItem {
     pub tile_spacing: LayoutSize,
     pub image_rendering: ImageRendering,
     pub alpha_type: AlphaType,
+    pub color: ColorF,
 }
 
 #[repr(u32)]
diff --git a/webrender_api/src/display_list.rs b/webrender_api/src/display_list.rs
index 27f6469fca..32cc718324 100644
--- a/webrender_api/src/display_list.rs
+++ b/webrender_api/src/display_list.rs
@@ -1062,6 +1062,7 @@ impl DisplayListBuilder {
         image_rendering: ImageRendering,
         alpha_type: AlphaType,
         key: ImageKey,
+        color: ColorF,
     ) {
         let item = SpecificDisplayItem::Image(ImageDisplayItem {
             image_key: key,
@@ -1069,6 +1070,7 @@ impl DisplayListBuilder {
             tile_spacing,
             image_rendering,
             alpha_type,
+            color,
         });
 
         self.push_item(item, info);
diff --git a/wrench/src/main.rs b/wrench/src/main.rs
index c15d7c697a..cea1bb9f34 100644
--- a/wrench/src/main.rs
+++ b/wrench/src/main.rs
@@ -86,8 +86,6 @@ use yaml_frame_reader::YamlFrameReader;
 
 lazy_static! {
     static ref PLATFORM_DEFAULT_FACE_NAME: String = String::from("Arial");
-    static ref WHITE_COLOR: ColorF = ColorF::new(1.0, 1.0, 1.0, 1.0);
-    static ref BLACK_COLOR: ColorF = ColorF::new(0.0, 0.0, 0.0, 1.0);
 }
 
 pub static mut CURRENT_FRAME_NUMBER: u32 = 0;
diff --git a/wrench/src/rawtest.rs b/wrench/src/rawtest.rs
index 57d3ea95a9..02de21e42f 100644
--- a/wrench/src/rawtest.rs
+++ b/wrench/src/rawtest.rs
@@ -114,6 +114,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         let mut epoch = Epoch(0);
@@ -180,6 +181,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
         txn.set_image_visible_area(
             blob_img,
@@ -284,6 +286,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img1,
+            ColorF::WHITE,
         );
 
         self.submit_dl(&mut Epoch(0), layout_size, builder, &txn.resource_updates);
@@ -319,6 +322,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img2,
+            ColorF::WHITE,
         );
 
         self.submit_dl(&mut Epoch(1), layout_size, builder, &txn.resource_updates);
@@ -372,6 +376,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         let mut epoch = Epoch(0);
@@ -396,6 +401,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         self.submit_dl(&mut epoch, layout_size, builder, &[]);
@@ -425,6 +431,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         let mut epoch = Epoch(2);
@@ -485,6 +492,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         let mut epoch = Epoch(0);
@@ -507,6 +515,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         txn.resource_updates.clear();
@@ -591,6 +600,7 @@ impl<'a> RawtestHarness<'a> {
                 ImageRendering::Auto,
                 AlphaType::PremultipliedAlpha,
                 blob_img,
+                ColorF::WHITE,
             );
             builder.push_image(
                 &info2,
@@ -599,6 +609,7 @@ impl<'a> RawtestHarness<'a> {
                 ImageRendering::Auto,
                 AlphaType::PremultipliedAlpha,
                 blob_img2,
+                ColorF::WHITE,
             );
         };
 
@@ -689,6 +700,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         let mut epoch = Epoch(0);
@@ -715,6 +727,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         self.submit_dl(&mut epoch, layout_size, builder, &txn.resource_updates);
@@ -739,6 +752,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             blob_img,
+            ColorF::WHITE,
         );
 
         self.submit_dl(&mut epoch, layout_size, builder, &txn.resource_updates);
@@ -900,6 +914,7 @@ impl<'a> RawtestHarness<'a> {
             ImageRendering::Auto,
             AlphaType::PremultipliedAlpha,
             image,
+            ColorF::WHITE,
         );
 
         let mut txn = Transaction::new();
diff --git a/wrench/src/wrench.rs b/wrench/src/wrench.rs
index 078f0c84ed..7f9d788f1c 100644
--- a/wrench/src/wrench.rs
+++ b/wrench/src/wrench.rs
@@ -22,7 +22,7 @@ use webrender;
 use webrender::api::*;
 use webrender::{DebugFlags, RendererStats};
 use yaml_frame_writer::YamlFrameWriterReceiver;
-use {WindowWrapper, NotifierEvent, BLACK_COLOR, WHITE_COLOR};
+use {WindowWrapper, NotifierEvent};
 
 // TODO(gw): This descriptor matches what we currently support for fonts
 //           but is quite a mess. We should at least document and
@@ -561,7 +561,7 @@ impl Wrench {
             "X - Do a hit test at the current cursor position",
         ];
 
-        let color_and_offset = [(*BLACK_COLOR, 2.0), (*WHITE_COLOR, 0.0)];
+        let color_and_offset = [(ColorF::BLACK, 2.0), (ColorF::WHITE, 0.0)];
         let dr = self.renderer.debug_renderer().unwrap();
 
         for ref co in &color_and_offset {
diff --git a/wrench/src/yaml_frame_reader.rs b/wrench/src/yaml_frame_reader.rs
index 53d0023723..d8b81f66aa 100644
--- a/wrench/src/yaml_frame_reader.rs
+++ b/wrench/src/yaml_frame_reader.rs
@@ -17,7 +17,7 @@ use webrender::api::*;
 use wrench::{FontDescriptor, Wrench, WrenchThing};
 use yaml_helper::{StringEnum, YamlHelper, make_perspective};
 use yaml_rust::{Yaml, YamlLoader};
-use {BLACK_COLOR, PLATFORM_DEFAULT_FACE_NAME, WHITE_COLOR};
+use PLATFORM_DEFAULT_FACE_NAME;
 
 fn rsrc_path(item: &Yaml, aux_dir: &PathBuf) -> PathBuf {
     let filename = item.as_str().unwrap();
@@ -680,7 +680,7 @@ impl YamlFrameReader {
         info.rect = item[bounds_key]
             .as_rect()
             .expect("rect type must have bounds");
-        let color = item["color"].as_colorf().unwrap_or(*WHITE_COLOR);
+        let color = item["color"].as_colorf().unwrap_or(ColorF::WHITE);
         dl.push_rect(&info, color);
     }
 
@@ -702,7 +702,7 @@ impl YamlFrameReader {
         item: &Yaml,
         info: &mut LayoutPrimitiveInfo,
     ) {
-        let color = item["color"].as_colorf().unwrap_or(*BLACK_COLOR);
+        let color = item["color"].as_colorf().unwrap_or(ColorF::BLACK);
         let orientation = item["orientation"]
             .as_str()
             .and_then(LineOrientation::from_str)
@@ -1123,7 +1123,7 @@ impl YamlFrameReader {
                 item
             ),
         };
-        dl.push_image(&info, stretch_size, tile_spacing, rendering, alpha_type, image_key);
+        dl.push_image(&info, stretch_size, tile_spacing, rendering, alpha_type, image_key, ColorF::WHITE);
     }
 
     fn handle_text(
@@ -1134,7 +1134,7 @@ impl YamlFrameReader {
         info: &mut LayoutPrimitiveInfo,
     ) {
         let size = item["size"].as_pt_to_au().unwrap_or(Au::from_f32_px(16.0));
-        let color = item["color"].as_colorf().unwrap_or(*BLACK_COLOR);
+        let color = item["color"].as_colorf().unwrap_or(ColorF::BLACK);
         let bg_color = item["bg-color"].as_colorf().map(|c| c.into());
         let synthetic_italics = if let Some(angle) = item["synthetic-italics"].as_f32() {
             SyntheticItalics::from_degrees(angle)
@@ -1452,7 +1452,7 @@ impl YamlFrameReader {
     ) {
         let blur_radius = yaml["blur-radius"].as_f32().unwrap_or(0.0);
         let offset = yaml["offset"].as_vector().unwrap_or(LayoutVector2D::zero());
-        let color = yaml["color"].as_colorf().unwrap_or(*BLACK_COLOR);
+        let color = yaml["color"].as_colorf().unwrap_or(ColorF::BLACK);
 
         dl.push_shadow(
             &info,