>>7
今気付いたんですが、全ての色コードの先頭に『 # 』半角シャープを付けてください！
#色コードの先頭に『 # 』は必須です。

今までAndroidで確認してみてたんですが、ふと「カメイさんの投稿がiPhoneということは、ブラウザはSafariか？」と思ってiPadのSafariで確認してみたら……全く同じ状態になりました！
（＝プレビューでは配色が反映されるのに、サイト上では反映されず未読リンク：青／既読リンク：紫になる）

多分ですが、色コードに # がついていないせいでHTML文法エラーになり、ブラウザのデフォルト設定（未読リンク：青／既読リンク：紫）になっているのかと……
なぜプレビューでは大丈夫なのかはよく分からないんですが、検証はさておきとりあえず『 # 』を色コードにつけてみてください〜。