diff --git a/src/renderer/dom/DomRendererRowFactory.test.ts b/src/renderer/dom/DomRendererRowFactory.test.ts
index 93a60d95..f28830ce 100644
--- a/src/renderer/dom/DomRendererRowFactory.test.ts
+++ b/src/renderer/dom/DomRendererRowFactory.test.ts
@@ -18,64 +18,116 @@ describe('DomRendererRowFactory', () => {
   beforeEach(() => {
     dom = new jsdom.JSDOM('');
     rowFactory = new DomRendererRowFactory(dom.window.document);
-    lineData = createEmptyLineData(4);
+    lineData = createEmptyLineData(2);
   });
 
   describe('createRow', () => {
     it('should create an element for every character in the row', () => {
       const fragment = rowFactory.createRow(lineData, false, 0, 5);
       assert.equal(getFragmentHtml(fragment),
-        '<span> </span>' +
-        '<span> </span>' +
         '<span> </span>' +
         '<span> </span>'
       );
     });
 
     it('should set correct attributes for double width characters', () => {
-      lineData[1] = [DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)];
+      lineData[0] = [DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)];
       // There should be no element for the following "empty" cell
-      lineData[2] = [DEFAULT_ATTR, '', 0, undefined];
+      lineData[1] = [DEFAULT_ATTR, '', 0, undefined];
       const fragment = rowFactory.createRow(lineData, false, 0, 5);
       assert.equal(getFragmentHtml(fragment),
-        '<span> </span>' +
-        '<span style="width: 10px;">語</span>' +
-        '<span> </span>'
+        '<span style="width: 10px;">語</span>'
       );
     });
 
     it('should add class for cursor', () => {
-      const fragment = rowFactory.createRow(lineData, true, 1, 5);
+      const fragment = rowFactory.createRow(lineData, true, 0, 5);
       assert.equal(getFragmentHtml(fragment),
-        '<span> </span>' +
         '<span class="xterm-cursor"> </span>' +
-        '<span> </span>' +
         '<span> </span>'
       );
     });
 
     describe('attributes', () => {
       it('should add class for bold', () => {
-        lineData[1] = [DEFAULT_ATTR | (FLAGS.BOLD << 18), 'a', 1, 'a'.charCodeAt(0)];
+        lineData[0] = [DEFAULT_ATTR | (FLAGS.BOLD << 18), 'a', 1, 'a'.charCodeAt(0)];
         const fragment = rowFactory.createRow(lineData, false, 0, 5);
         assert.equal(getFragmentHtml(fragment),
-          '<span> </span>' +
           '<span class="xterm-bold">a</span>' +
-          '<span> </span>' +
           '<span> </span>'
         );
       });
 
       it('should add class for italic', () => {
-        lineData[1] = [DEFAULT_ATTR | (FLAGS.ITALIC << 18), 'a', 1, 'a'.charCodeAt(0)];
+        lineData[0] = [DEFAULT_ATTR | (FLAGS.ITALIC << 18), 'a', 1, 'a'.charCodeAt(0)];
         const fragment = rowFactory.createRow(lineData, false, 0, 5);
         assert.equal(getFragmentHtml(fragment),
-          '<span> </span>' +
           '<span class="xterm-italic">a</span>' +
-          '<span> </span>' +
           '<span> </span>'
         );
       });
+
+      it('should add classes for 256 foreground colors', () => {
+        const defaultAttrNoFgColor = (0 << 9) | (256 << 0);
+        for (let i = 0; i < 256; i++) {
+          lineData[0] = [defaultAttrNoFgColor | (i << 9), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-fg-${i}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
+
+      it('should add classes for 256 background colors', () => {
+        const defaultAttrNoBgColor = (257 << 9) | (0 << 0);
+        for (let i = 0; i < 256; i++) {
+          lineData[0] = [defaultAttrNoBgColor | (i << 0), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-bg-${i}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
+
+      it('should correctly invert colors', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (2 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-1 xterm-bg-2">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should correctly invert default fg color', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (257 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-1 xterm-bg-15">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should correctly invert default bg color', () => {
+        lineData[0] = [(FLAGS.INVERSE << 18) | (1 << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)];
+        const fragment = rowFactory.createRow(lineData, false, 0, 5);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-fg-0 xterm-bg-1">a</span>' +
+          '<span> </span>'
+        );
+      });
+
+      it('should turn bold fg text bright', () => {
+        for (let i = 0; i < 8; i++) {
+          lineData[0] = [(FLAGS.BOLD << 18) | (i << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)];
+          const fragment = rowFactory.createRow(lineData, false, 0, 5);
+          assert.equal(getFragmentHtml(fragment),
+            `<span class="xterm-bold xterm-fg-${i + 8}">a</span>` +
+            '<span> </span>'
+          );
+        }
+      });
     });
   });
 
diff --git a/src/renderer/dom/DomRendererRowFactory.ts b/src/renderer/dom/DomRendererRowFactory.ts
index bfecace5..b07dddb8 100644
--- a/src/renderer/dom/DomRendererRowFactory.ts
+++ b/src/renderer/dom/DomRendererRowFactory.ts
@@ -6,7 +6,6 @@
 import { LineData } from '../../Types';
 import { CHAR_DATA_CHAR_INDEX, CHAR_DATA_ATTR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../../Buffer';
 import { FLAGS } from '../Types';
-import { INVERTED_DEFAULT_COLOR } from '../atlas/Types';
 
 export const BOLD_CLASS = 'xterm-bold';
 export const ITALIC_CLASS = 'xterm-italic';
@@ -50,11 +49,10 @@ export class DomRendererRowFactory {
         bg = fg;
         fg = temp;
         if (fg === 256) {
-          // TODO: INVERTED_DEFAULT_COLOR should not be in atlas
-          fg = INVERTED_DEFAULT_COLOR;
+          fg = 0;
         }
         if (bg === 257) {
-          bg = INVERTED_DEFAULT_COLOR;
+          bg = 15;
         }
       }