ダークモードへの対応については、仕様を把握できていませんが、文字色を Black や #000001 などに指定すれば解決できるのではないでしょうか。
ダークモード背景とパステルカラーのコントラストについても、FrontPageは黄緑色の背景色があるので大きな問題にならないと思っているのですがいかがでしょうか（ダークモードとしては機能しないということになってしまいますが……）。
私は、配色は現行のサンプルのままでも問題ないと考えています。
FrontPageへの掲載が前提であれば、彩度の高いパステルカラーでも黄緑色のセクション背景に馴染みますし、黒文字との組み合わせもWebデザインとして悪くないと思います。
ただ、#000000の黒文字はモダンではないので、flexbox+表版1の文字色を#222222にしてみました。
今回、ゲーム内枠線色をリストの背景色として採用したのは、可読性を重視したためです。
ゲーム内背景色をそのままリストの背景色に使うと、黒文字とのコントラストが低く読みづらくなってしまいます（その場合のサンプルを「flexbox+表版1」に追記しました）。
白文字を使うことで文字を目立たせることも出来ますが、「活発」の黄色背景色などでは白文字が見えづらいため性格間の統一性が取れなくなります。
ちなみに、ゲーム内では名前欄の背景を白くすることでこれを解決しています。
また、本案では枠線にレアリティ表示の意味を持たせているため、背景は薄く、枠は濃くしないと判別が難しくなるという事情も一応あります。
ゲーム内カラーの採用について、私自身スクショからスポイトで抽出しており、ご提示いただいた数値との差は環境による誤差の範囲で、どちらも「正しい色」ではあるかと思います。
目視でもほとんど差はないはずです。
「純粋」の属性色が少し眩しく感じるのは、ゲームUIのベースである緑色と差別化するために明度・彩度が高く設定されているからだと思われます。
他の性格の色であれば、それほど違和感はないのではないでしょうか。
「純粋」の色のみ明度・彩度を落とす案もありますが、FrontPageのデザインも基本的にはスポイトで取ったゲーム内の色を使ってるので、コンセプトが少しブレるかもしれません。
追加で、よりゲーム内デザインに近い「flexbox+表版3」も作成しました。
こちらの利点はゲーム内デザインの再現性と可読性を両立できること、枠線を使わないのでキャラ画像が少し大きくなること、欠点は縦幅が増えることです。