title: Two borders with same HEX color in CSS don't look the same
body: <p>My "currently selected" navigation element uses a red (#dc251c) indicator bar created as the background to an empty div. I also have a "special notice" text banner that has a red (#dc251c) top border.</p>
  
  <p>These two red bars are shown immediately adjacent, and clearly are not the same color:</p>
  
  <p><a href="https://i.stack.imgur.com/rRSVJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRSVJ.png" alt="enter image description here"></a></p>
  
  <p>The navigation element is created via an empty div with the class "active-marker" inside the li.</p>
  
  <pre><code>&lt;div class="active-marker"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the Inspector confirms the Style is</p>
  
  <pre><code>.menu li .active-marker {
      display: none;
      position: absolute;
      height: 5px;
      bottom: 0px;
      width: 100%;
      background-color: #dc251c;
  }
  </code></pre>
  
  <p>and the Computed background-color is #DC251C.</p>
  
  <p>The announcement border is created via a div with colored top (and bottom) borders:</p>
  
  <pre><code>&lt;div class="current_campaign text-campaign pull-center"&gt;ETC&lt;/div&gt;
  </code></pre>
  
  <p>Which Inspector confirms is the correct CSS:</p>
  
  <pre><code>.text-campaign {
      font-size: 33px;
      border-top: 3px solid #dc251c;
      border-bottom: 3px solid #dc251c;
      background: #ffffff;
      padding-bottom: 1px;
  }
  </code></pre>
  
  <p>and Computed verifies that border-top-color is #DC251C</p>
  
  <p>If the problem was that these reds looked different on different machines, monitors or browsers I'd understand. Or if one was specified as HEX and the other was RGB. But I can't figure out how the same HEX value looks different on the same page (whether viewed in Chrome, Firefox, and Safari).</p>
  
  <p>Here are some clues: 
  - loading the screenshot into Photoshop indicates that the navigation color is the correct red (#dc251c), and the text notice border is wrong (#c62119).
  - if I manually change the navigation highlight to #c62119 in the Inspector then the two reds match.
  - the problem only appears at the widest size (it's a responsive design). the design is different for the narrowest size, but looks correct for the intermediate size.</p>
  
  <p>Any clues or suggestions on how to fix (other than changing the notice borders to something completely different, which is my workaround strategy)?</p>
  
  <p>Thanks!
  julie</p>
  
  <p>P.S. This code is from a RoR+bootrap framework built by a developer I'm working with. So there may be some other information that would be useful - please let me know.</p>